Sassでも変数を定義することで、任意の場所で呼び出すことができる。
変数は「$変数名:値; → $mainColor: #3a86e0;
」という形で宣言する。
変数とスコープ
どのるルールセットにも属さない変数は、グローバル変数として全てのルールセットから呼び出すことができるが、ルールセット内で宣言した変数はローカル変数となり、そのルールセット内でのみ呼び出すことができる。
#main{ $mainColor: #3a86e0; border-bottom: $mainColor; a{ color: $mainColor; } } #side{ $mainColor: #3a86e0; }
↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓
#main { border-bottom: #3a86e0; } #main a { color: #3a86e0; }
#side
からは$mainColor
を呼び出せないので、コンパイル時には無視される。(エラーは出ない)
演算
演算は、+
(足し算)や-
(引き算)、または*
(かけ算)、/
(割り算)などを使うことで、コンパイル時に計算結果を返してくれる。
#main{ $w:800px; width:$w; .left{ width: $w / 2; float: left; } .right{ width: $w / 2 - 10; float: right; } }
↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓
#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」
コメントを残す