用途
同じカラーコードをまとめておく。
デザイナーのケアレスミスなどで色コードを微妙に変えたいなどと言った場合にもすぐ対応できます。一括置換よりは楽です。
変数名のルール
変数名として使える記号は以下の三種類だけです。それ以外の記号は使えません。
- 半角英数字
- ハイフン
- アンダースコア
変数の注意点
- 宣言する前の行からは参照できません。（Sassは前から順に処理されるためです。）
- 同じ変数名を重複して宣言した場合は後から宣言した方で上書きされます。
- グローバル変数とローカル変数が同じ名前の場合は、ローカル変数の方が優先されます。
変数のスコープ
グローバル変数
|
1 2 3 4 5 |
$white: #fff; div { color: $white; } |
ローカル変数
ルールセットの中でも宣言します。その場合は同一のルールセット内でしか変数の中身を参照できません。
|
1 2 3 4 5 |
div { $black: #000; background-color: $black; } |
なお、別々のルールセット同士であれば同じ変数名でも値を設定することが可能です。
変数の型
Sassにもデータ型があります。
Number型
変数に以下のものを設定した場合はNumber型になります。
- 整数
- 小数
- px
- rem
- %
Color型
色の型があります。
- red
- #fff
- rgba(255,0,0,1)
String型（文字列）
- ダブルコーテーション
- シングルコーテーション
- Number、Color型以外の文字列（hogeなど）
Boolean型
- true
- false
List型（配列）
- スペースで区切ったもの（例：1px 10px 2px;）
- 丸括弧で区切ったもの（例：(1px,10px,2px);）
- 各括弧で区切ったもの（例：[1px,10px,2px];）
Map型（連想配列）
以下のような形式のものを指します。
|
1 2 3 4 |
$map: { aaa: "あああ"; bbb: "いいい"; } |
関数型
|
1 |
get-function("返り値") |
null型
nullで指定された値です。nullで指定されたプロパティは出力されません。
インターポレーション
以下のようにすれば、文字列の中に変数の値を埋め込むことが可能です。
|
1 2 3 4 5 6 |
$TODAY: "今日は"; .plus { width: 300px + 12px; content: "#{$TODAY}晴れです"; } |
セレクター名にも使える
同じように以下のように記述すればセレクター名にもインターポレーションは使うことが可能です。
|
1 2 3 4 5 |
$selector: ".box"; #{$selector} { color: "#fff"; } |
!default
変数のデフォルト値を設定できます。上書きされることを前提とした変数の値になります。
例えば、以下のように通常同じ変数名であれば後から宣言した値で上書きされるのですが、「!default」をつけた場合は上書きされずに事前に設定しておいた値が優先されます。
|
1 2 3 4 5 6 7 |
$TODAY: "今日は"; .plus { $TODAY: "明日は" !default; content: "#{$TODAY}晴れです"; } |
!global
ローカル変数をグローバル変数にすることができる機能です。なので、別セレクタ内からも他のセレクタの内容を参照することが可能になります。
|
1 2 3 4 5 6 7 8 9 |
.plus { $TOMORROW: "明日は" !global; content: "#{$TOMORROW}晴れです"; } .minus { content: "#{$TOMORROW}特売日です"; } |
「演算」機能について
例えば、「padding: 14px」と設定されていた場合にどういう基準を元に14pxと設定したのかそのソースを見ただけではわかりません。もちろんコメントなどをすることもいいことだとは思いますが、何かしら演算の結果そういう値をしたのであれば、そのように設定されていた方が保守性は上がります。
Sassの変数機能と組み合わせると効果が非常に高いです。
四則演算＋α
なお、以下の演算は全て組み合わせて使うことも可能です。
足し算
数字同士の計算だけではなく、文字列結合にも使うことが可能です。
|
1 2 3 4 |
.plus { width: 300px + 12px; content: "今日は" + "晴れです。"; } |
引き算
|
1 2 3 |
.minus { width: 300px - 12px; } |
掛け算
|
1 2 3 |
.calc { width: 300px * 3; } |
割り算
割り算の場合だけは括弧をつけます。
|
1 2 3 |
.warizan { width: (300px / 3); } |
剰余計算
|
1 2 3 |
.jouyo { width: 300px % 7; } |
条件分岐
実装
変換前
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@mixin bunki($type) { @if $type == 0 { border: 1px solid #fff; } @else if $type == 1 { border: 2px solid #bbb; } @else { border: 3px solid #ccc; } } .bunki1{ @include bunki(0); } .bunki2{ @include bunki(1); } .bunki3{ @include bunki(2); } |
変換後
|
1 2 3 4 5 6 7 8 9 10 11 |
.bunki1 { border: 1px solid #fff; } .bunki2 { border: 2px solid #bbb; } .bunki3 { border: 3px solid #ccc; } |
使える比較演算子
以下の比較演算子は普通に使えます。
- ==
- >
- <
- >=
- <=
- !=
使える論理演算子
- and
- or
- not
繰り返し処理
実装例
余白調整用のスタイルシートを出力する例になります。
変換前
インターポレーションと組み合わせて使うことが多いです。
|
1 2 3 4 5 |
@for $i from 1 through 3 { .mt#{$i} { margin-top: #{$i}px; } } |
変換後
|
1 2 3 4 5 6 7 8 9 10 11 |
.mt1 { margin-top: 1px; } .mt2 { margin-top: 2px; } .mt3 { margin-top: 3px; } |
toを使う
|
1 2 3 4 5 |
@for $i from 1 to 3 { .mt#{$i} { margin-top: #{$i}px; } } |
変換後は以下のようになります。終了値が含まれなくなります。
|
1 2 3 4 5 6 7 |
.mt1 { margin-top: 1px; } .mt2 { margin-top: 2px; } |
10ずつ増やす
for文の間に変数を一つ追加すればいけます。
|
1 2 3 4 5 6 |
@for $i from 1 to 3 { $index: $i * 10; .mt#{$index} { margin-top: #{$i}px; } } |
whileを使う
以下のようにインクリメントを使います。
|
1 2 3 4 5 6 7 |
$i:0; @while($i < 3) { .mt#{$i} { margin-top: #{$i}px; } $i: $i+1; } |
配列の要素数分ループを回す（each)
|
1 2 3 4 5 6 7 |
$icons: aaa,bbb,ccc; @each $value in $icons { .icon_#{$value} { background: url("../image/#{$value}"); } } |
この記事へのコメントはありません。