親セレクタの参照
&
変数の宣言
$変数名: 値;スコープあり。
演算も可能
width: 50px / 2; // 25px
@import
他のsassファイル(cssファイル)の読み込み
@import ‘example.scss’;→読み込んだファイルもファイルの一部としてコンパイルされる点に注意
パーシャル
インポートファイルをコンパイルしないための機能。
ファイル名の先頭に「_」をつける。
例) _header.scss
→ファイルの先頭や、ネスト内など、好きな位置でimportすることができる
エクステンド
指定したセレクタのスタイルを継承できる機能。
@extend セレクタ;
複数継承も可能
.item {
@extend .box; //.boxのルールセットを継承
@extend .button; //.buttonのルールセットも継承
}
連鎖継承も可能
.item1 { color: red; }
.item2 { @extend: .item1; width: 100%;} // .item1を継承
.item3 { @extend: .item2; height: 100%;} // .item1を継承した.item2を継承
プレースホルダ
「%プレースホルダ名」で、エクステンド専用の「プレースホルダ」を作れる。
プレースホルダはエクステンド専用のため、コンパイル後にcssファイルに残らない
%extendStyle { color: white;}→@media内と、外とでは、継承は分けて使用した方がベター
ミックスイン
スタイルの集まり定義しておいて、他の場所で呼び出して使用できるもの
定義の仕方
@mixin ミックスイン名 {}
呼び出し方
.item {
@include ミックスイン名;
}
引数も使用可能
@mixin item($color) {
color: $color;
}
初期値も指定可能
@mixin item($color: white) {
color: $color; //引数無しで@includeすると初期値のwhiteが指定される
}
複数の引数も、カンマで区切って指定可能
@mixin item($width: 20px, height: 30px) {…}
→複数ある引数の、指定の引数だけに引数を渡したい場合、指定の引数名を指定し、値を渡す
@mixin item($width: 20px, height: 30px) {…}
@include item(height: 40px); // 第二引数だけ指定して40pxを渡している
可変長引数
引数の数を制御する。mixin側とinclude側で挙動が異なる。
mixin側
→引数に…(カンマ3つ)を付けることで、カンマで区切ってある引数を一つの引数として使えるようになる
@mixin item($value…) {
text-shadow: value; //カンマで区切る必要があるプロパティ
}
@include item(カンマで区切った引数);
include側
→引数に…(カンマ3つ)を付けることで、カンマで区切った引数を、mixin側で各値に分割して渡すことができる
$values: 30px, 20px;
@include item ($values…);
@content
mixin側に記述しておくことで、呼び出しもとのincludeのルールセットを受け継ぐことができる
@mixin item {
@content // ここにcolor: white;を受け継ぐ
}
@include item {
color: white;
}@at-root
ネストしているセレクタをルートに戻せる機能
使い所がよくわかんなかったので、割愛。
条件分岐と繰り返しも使用可能
特別なことはないので、基本的な書き方だけ
条件分岐
@if 条件式 {
}
@else if 条件式 {
}
@else {
}
繰り返し
@for $value from 開始値 to 終了値 {} //終了値未満で繰り返し
@for $value from 開始値 through 終了値 {} //終了値を含んで繰り返し
@while 条件式 {}
@each $変数名 in リスト {}
関数
sassが提供する関数と自分で定義する関数がある。
これも特別なことはないので、基本的なとこだけ。
sassの関数（例）
background: lighten(#000, 30%); //第一引数の色を30%明るくした色を返す関数
自分で定義する関数
@function 関数名($引数) {
@return 戻り値;
}
インターポレーション
#{変数}とすることで、変数が参照できない場所でも変数を参照できる。
→演算の制御や、クウォートの制御もやってくれる
便利なフラグ
!defalutフラグ
デフォルト値を設定するフラグ。上書きされることを前提にした初期値
!globalフラグ
ローカルで定義した変数を、グローバル変数に変更するフラグ。
コメントを残す