Edited at

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