Sassでも変数を定義することで、任意の場所で呼び出すことができる。
変数は「$変数名:値; → $mainColor: #3a86e0;」という形で宣言する。
変数とスコープ
どのるルールセットにも属さない変数は、グローバル変数として全てのルールセットから呼び出すことができるが、ルールセット内で宣言した変数はローカル変数となり、そのルールセット内でのみ呼び出すことができる。
|
1 2 3 4 5 6 7 8 9 10 |
#main{ $mainColor: #3a86e0; border-bottom: $mainColor; a{ color: $mainColor; } } #side{ $mainColor: #3a86e0; } |
↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓
|
1 2 3 4 5 6 |
#main { border-bottom: #3a86e0; } #main a { color: #3a86e0; } |
#sideからは$mainColorを呼び出せないので、コンパイル時には無視される。（エラーは出ない）
演算
演算は、+（足し算）や-（引き算）、または*（かけ算）、/（割り算）などを使うことで、コンパイル時に計算結果を返してくれる。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#main{ $w:800px; width:$w; .left{ width: $w / 2; float: left; } .right{ width: $w / 2 - 10; float: right; } } |
↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓
|
1 2 3 4 5 6 7 8 9 10 11 |
#main { width: 800px; } main .left { width: 400px; float: left; } #main .right { width: 390px; float: right; } |
この例では、変数「w」に800pxを代入して
.leftでは変数「w」を2で割る.rightでは変数「w」を2で割って10を引く
ということをしている。
覚えておくと便利なのでぜひ覚えよう。
次回「 @import」
広告