Sass基礎

Sassとは

Syntactically Awesome StyleSheet(文法的に格好良いスタイルシート)の略。
CSSを拡張した言語というか表記法。
変数や階層や関数を使えるように拡張されている。
CSSの肥大化が辛くて死にそうになった人が、プログラマブルにCSSを記載したくなり編み出したらしい。
実際使うときはコンパイラを通してCSSに変換して使う必要がある。
また、表記法としてもSASSとSCSSの2通りの書式がある。各々の所感は以下。

SASS
最初に作られたのはこちらの記法らしい。流行ってない。ファイルの拡張子は.sass
括弧やセミコロンを省略、予約語も記号等で表現したりする。
記載量を削減させようと規約ベースで頑張ってるイメージ。
初めてJavaプログラマがPython見たときの感想に近い。慣れれば早く書けるんだと思う。多分。

SCSS
後発で作られたのがこちら。主流はこちら。ファイルの拡張子は.scss
CSSの記法に寄せてあり、とっつきやすい。そして主流であるが故ネット上に情報も多い。
個人的に仕事で書くソースは誰もが読めるということが大事なので、こっちだけやればいいと思う。

SCSSの記載方法

変数定義

頭に$をつけると変数として扱われる。
CSS同様上から順に読まれるので先頭とかで定義することになる。
あと、スコープも効くので注意。

$aaaa: #ffffff;
.prof {
  background-color: $aaaa;
}

階層化

入れ子ができる。視覚的にまとまるし、親のclass名変わった時とかに便利。

.prof {
  background-color: #ffffff;
	.info {
	  color:#aaaaaa;
	}
	p {
	  color:#2b546a;
	}
}

階層化(hoverやaction等の擬似クラス)

&が親を指す。以下みたいに書くと有効になる。

.prof {
  background-color: #ffffff;
	&:hover{
	  color:#aaaaaa;
	}
}

関数化

@ mixinのように書くと関数として宣言できる。使うときは@ includeで展開される。

@mixin layout-image {
  padding: 40px 28px;
  margin: 16px 8px;
  background-color: #ffffff;
}

.prof {
  @include layout-image;
}

関数化(引数あり)

関数に引数も取れる。これ便利。
あと四則演算も使える。

@mixin layout-image($padding, $color) {
  padding: $padding $padding / 2;
  margin: 16px 8px;
  background-color: $color;
}

.prof {
  @include layout-image(20px, #ffffff);
}

別SCSSファイルのインポート

読み込み対象のscssファイルは頭にアンダースコア、末尾に拡張子が必要。
_XXXXXX.scssというファイルを読み込む前提だと以下。

@import XXXXXX;

その他関数

SASSで定義されている関数がある模様。
全量はググってね。

関数名	概要	利用例
darken(色, パーセンテージ)	色を暗くする	color: darken(#ffe400, 20%)
lighten(色, パーセンテージ)	色を明るくする	color: lighten(#ffe400, 20%)
rgba(色, 透過値)	透過値変更	color: lighten(#ffe400, 0.5)

SCSSをCSSにビルドする

せっかくなので動かしたい。
preprosというツールがよさそう。
Rubyも含めてインストールしてくれるので、インストーラたたくだけ。
prepros