skillup

技術ブログ

デザイン

sassについて

投稿日:2017年9月9日 更新日:

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。

sassとは

一言でいうとCSSをプログラミングのように書ける言語です。具体的には下記のようなことができます。

  • 変数、配列や条件分岐、繰り返しなどを使うことができる
  • ネストによりCSSの階層構造や継承を表記できる
  • テンプレート化したものを読み込んだりなどもできる
  • もちろん生のCSSを使うこともきます。

cssも保守するの結構大変ですもんね・・

インストール&コンパイル

前提としてruby(とgem)がインストールされていないと動きません。

ruby(とgem)がインストールされていれば下記コマンドで一発インストールできます。

あとはsassの記法により、~.scssというファイルをつくり、下記コマンドで一気にcssファイルを作れます。

またnodeをインストールしたあと使うこともできます。

一般的な記法など

sample.scss

そして上記のファイルをコンパイルすると下記のようなcssができあがります。

sample.css

参考リンク

CSSの常識が変わる!「Compass」の基礎から応用まで!
※タイトルはcompassですがsassの説明も含まれています。

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 Contents1 ボーダー表示2 テーブルの背景色とボーダーのスタイル3 tableのレイアウト3.1 table-layout auto3.2 table- …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

アーカイブ