Sassには「SASS記法」と「SCSS記法」の二種類あります。
SASS記法(今回こちらは使用しない)
Sassファイルを拡張子「.sass」で作成
- CSSのブロックを「{}」ではなくインデントで表現
- 命令終了の「;」を省略
CSSと記述法が違うためあまり普及しませんでした。
ul background: red li padding: 10px
コンパイルして生成されるCSSファイル
ul { background: red; } ul li { padding: 10px; }
SCSS記法(今回こちらを使用)
Sassファイルを拡張子「.scss」で作成
- CSSと互換性があり通常のCSS記法 + Sass記法で記述
CSSの記述法がそのまま使えるため、Sass記法の主流になっています。
ネスト(入れ子)にしたセレクタは子孫セレクタになります。
ul { background: red; li{ padding: 10px; } }
コンパイルして生成されるCSSファイル
ul { background: red; } ul li { padding: 10px; }
子孫セレクタ:セレクタをネスト
子孫セレクタはセレクタをネストにすることで実現できます。
ul { background: red; li{ padding: 10px; } }
コンパイルして生成されるCSSファイル
ul { background: red; } ul li { padding: 10px; }
親の参照:「&」
セレクタをネストすると子孫セレクタになってしまうため、「:hover」などの擬似クラスを定義する際は「親の参照」を意味する「&」を使用します。
a { text-decoration: none; &:hover { text-decoration: underline; } }
コンパイルして生成されるCSSファイル
a { text-decoration: none; } a:hover { text-decoration: underline; }
うまくいかない例
「&」を記述しないと子孫セレクタになり「a」と「:hover」のは間に半角スペースが入ってしまいます。
a { text-decoration: none; :hover { text-decoration: underline; } }
コンパイルして生成されるCSSファイル
a { text-decoration: none; } a :hover { text-decoration: underline; }
変数:「$変数名」
よく使う値を変数に代入して使用できます。
- 文字色や背景色などのカラーコード
- フォントファミリー
- カラム幅
- ブレイクポイント
変数に値を代入
「$」の後に変数名を記述し「:」の後に変数に代入する値を記述します。
$変数名: 値;
実際に使用してみます。
$color-main: #f00; $color-sub: #0f0; a { text-decoration: none; color: $color-main; :hover { text-decoration: underline; color: $color-sub; } }
コンパイルして生成されるCSSファイル
a { text-decoration: none; color: #f00; } a :hover { text-decoration: underline; color: #0f0; }
インターポレーション
文字列として変数を使用する場合は「#{変数名}」と記述します。
$path: '../img/'; .block { background-image: url(#{$path}bg.png); }
コンパイルして生成されるCSSファイル
.block { background-image: url(../img/bg.png); }
うまくいかない例
$path: '../img/'; .block { background-image: url($path/bg.png); }
コンパイルした際のエラー
-------------------- Compilation Error Error: Invalid CSS after "...e: url($path/bg": expected expression (e.g. 1px, bold), was ".png);" on line 4 of sass/c:\Users\x220\Desktop\test\sass_test\css\style.scss >> background-image: url($path/bg.png); --------------------------------^
計算
値を計算できます。
- + : 加算
- - : 減算
- * : 乗算
- / : 除算
- % : 余り算
除算の「/」はCSSの一括指定でも使用するため()で囲んで使用するか、変数と共に使用します。
$width: 100%; .col2 { width: $width/2; } .col3 { width: $width/3; } .col4 { width: $width/4; }
コンパイルして生成されるCSSファイル
.col2 { width: 50%; } .col3 { width: 33.33333%; } .col4 { width: 25%; }
コメント
通常の「/* コメント */」と1行コメント「// コメント」が使えます。
1行コメントはコンパイル後のファイルに出力されません。
$width: 100%; // 2列幅用クラス .col2 { width: $width/2; } // 3列幅用クラス .col3 { width: $width/3; } // 4列幅用クラス .col4 { width: $width/4; }
コンパイルして生成されるCSSファイル
.col2 { width: 50%; } .col3 { width: 33.33333%; } .col4 { width: 25%; }
慣れてきたら使うもの
- よく使う記述をテンプレート化:@mixin
- テンプレートの呼び出し:@include
- @includeで引数利用
- @includeで初期値利用
- セレクタの継承:@extend
- プレースホルダー:%
- 配列
- 条件分岐:@if
- 比較演算子・論理演算子
- 繰返し構文:@for
- 繰返し構文:@while
- 繰返し構文:@each
- 関数:@function