概要
- sass = cssのメタ言語(CSSを生成するための言語)
- sassの構文にはsassとscssがある
- sass = オリジナル、インデントが構文に含まれる、現在主流でない
- scss = cssがそのまま動く、現在の主流
導入
gemパッケージとしてインストールする
# インストール
$ gem install sass
# バージョン確認
$ sass -v
> Sass 3.4.22 (Selective Steve)
コマンド
-
基本的には
sass <INPUT.scss>:<OUTPUT.css>
の形式# foo.scssからfoo.cssを生成 $ sass foo.scss:foo.css
-
生成後のCSSの形式は、
—style <STYLE>
で指定できる- スタイルは4種ある
-
Nested
: SASSのインデント階層をそのまま残した形式(デフォルト) -
Expanded
: CSSの通常形式 -
Compact
: 改行の除去 -
Compressed
: さらに圧縮
-
$ sass foo.scss:foo.css —style expanded
- スタイルは4種ある
-
—line-comments
オプションで、scssの行位置を補足できる$ sass foo.scss:foo.css —line-comments` > /* line 10, foo.scss */ > #main { > …
-
—watch
をつけると変更を監視してくれる$ sass foo.scss:foo.css —watch # フォルダの指定も可能 $ sass . —watch # フォルダを入出力別に指定することも可能 $ sass sass:css —watch # エラー発生時に監視を停止 $ sass . —watch —stop-on-error
-
sassは
.sass-cache
フォルダをキャシュ用に生成する- 変更するには
--cache-location
オプションを使う -
—no-cache
オプションでキャッシュを作成しないようにもできる
- 変更するには
sassコマンドはエイリアスとしてscssコマンドとしても使える
-
—debug-info
をつけると、cssにscssの元データ情報が挿入される-
-sass-debug-info
プロパティとして各セレクタに入る
-
構文
ネスト
-
セレクタをネストで指定できる
// sass #main{ #inner{ // … } } // css #main #inner{ // … }
-
子孫以外のセレクタである子(
>
)や隣接(+
)もネスト指定可能#main{ > #inner{ } + #footer{ }
-
&
セレクタによって親を指定することが可能#main{ #outer & { // #outerの子の#mainにのみ作用する } &: hover{ // #main:hoverに作用する } }
-
プロパティもネストできる
#main{ border{ top: 0px; bottom: 5px; } }
コメント
- 従来の複数行コメント(
/**/
)にくわえて1行コメント(//
)が使える- ただし単行コメントはcss変換後に残らない
- 複数行コメントはcompressedしない限りそのまま残る
- ただし
/*! … */
とかくとcompressedでも残る
- ただし
変数
-
変数は
$variable: value
の形式で制限できる$red: #FF0000;
-
変数のスコープは、定義位置によって変わる
- セレクタの外で定義した場合は、対象のscssファイル全体
-
@import
すれば読み込み先でも使える
-
- セレクタ内で定義した場合は、そのセレクタの中のみ
- セレクタの外で定義した場合は、対象のscssファイル全体
-
変数は型を持つ
型名 リテラル Number 123, 1.23… Color red, #f00, #FF0000, rgba(255, 0, 0, 1)… String ‘foo’, “bar”, baz… Boolean ture, false List (a, b, c)…(括弧もカンマも必須でない) Null null -
変数をセレクタ名やURLとして使いたい場合は、
#{}
でインターポレイションを指定する$sel = ‘.main’ $url_base = ‘http://foobar.com/' #{$sel} { background: url(#{$url_base}img/baz.png); }
演算
-
数値は四則演算が可能
- 単位付きでも演算ができる
- 単位が異なっていても、組み合わせによっては演算できる
- OK: pxとcmなど
- NG: ptとemなど
- 除算を行う場合は構文上の制限で、括弧をつける必要がある
- 演算に変数を使うことも当然できる
// 単位付きの計算 height: 123px + 10px; // 除算の制限 width: ($width / $all);
-
色も演算可能
// 色と色の計算 color: #000000 + #111111; // = #111111 // 色と数値の計算 color: #000000 + 3; // = #030303;
-
文字列も結合が可能
content: $label + $message;
import
-
先頭がアンダースコアのscssファイルは、パーシャルとして扱われる
- パーシャルは、sassコマンドを実行してもcssが生成されない
- パーシャルを
@import
することで、パーシャルを読み込み元と結合して出力できる
-
sassの
@import
は、scssファイルをインポートすることができる- 拡張子は省略が可能
- パーシャルの場合のアンダースコアも省略可能
- 変換すると自動的に変換後のCSSファイルに置き換えられる
// module.scssあるいは_module.sassをインポート @import ‘module’
ファイルを複数指定することも可能
セレクタの内部で
@import
することも可能(影響範囲をスコープを制限できる)
継承
-
@extend
を使うと、他のセレクタの定義を継承できる- 多重継承(複数のセレクタを継承すること)も可能 -継承を連鎖させることも可能
#foo{ // #fooの定義 } #bar{ @extend #foo; // #fooの定義を継承できる // ここは#barの独自定義 }
-
%
を指定すると、継承専用のセレクタを作成できる%forExtend{ // … } #foo{ @extend %forExtend; }
Mix-in
-
Mix-in = あるセレクタに、別のセレクタを含めること
-
@mixin
と@include
をセットで使う
// scss @mixin base{ // … } mixed1{ @include base; } mixed1{ @include base; } // css mixed1{ // … } mixed2{ // … }
-
-
@mixin
は@extend
に似ているが、生成後のcssが異なってくる%base{ // … } mixed1{ @extend %base; } mixed2{ @extend %base; } // css mixed1, mixed2{ // … }
-
@mixin
は、引数をとることができる@mixin base($val1, $val2){ border-color: $val1; font-color: bar: $val2; } #foo{ @include base(#F00, #0F0); }
-
引数はデフォルト指定も可能
@mixin base($val: #F00){ border-color:$val; } #foo{ @include base; }
-
可変長引数を渡すことも可能
@mixin base($val…){ text-shadow: $val; }
-
@content
指定で、mixin側へ記述を渡すことも可能@mixin base{ @content } #foo{ @include base{ // … } }
制御構文
if
- 比較演算子は概ね他言語と同じ
-
論理演算子は
and, or, not
と書く@if $val == ‘foo’{ // … }@else if $some == 0 and $other == 1{ // … }@else{ // … }
for
-
throughとtoで終了条件を変える
@for $i from 0 through 10{ // 0から10まで実行 } @for $i from 0 to 10{ // 0から9まで実行 }
-
繰り返し内で変数を使うことが可能
// #item_1から#item_10を生成 @for $i from 1 through 10{ #item_#{$i}{ // … } }
while
$i: 0;
@while $i < 10{
// 0~9
$i: $i+1;
}
each
$prefixes = a, b, c, d
@each $prefix in $prefixes{
.content-#{$prefix}{
background-image: url(#{prefix}.png);
}
}
関数
ビルトイン関数
数学系
関数名 | 内容 |
---|---|
abs(num) | 絶対値 |
round(num) | 四捨五入 |
ceil(num) | 切り上げ |
floor(num) | 切り捨て |
色系
関数名 | 内容 |
---|---|
rgba(rgb, alpha) | RGBA型数値を指定する |
lighten(color, percent) | 色を明るくする |
darken(color, percent) | 色を暗くする |
mix(color, other, percent) | 色の中間色を作成する |
その他
関数名 | 内容 |
---|---|
nth(list, index) | リストの要素を取得 |
type-of(val) | データ型を返す |
quote(val) | 値をコーテーションする |
関数定義
@function foo($bar, $baz){
@return $bar + $baz;
}
デバッグ
-
@debug
と@warn
はコンパイル時にメッセージを表示する@debug ‘debug message’; @warn ‘warning message’;