Sassの便利な機能に「変数」があります。ここでいきなり変数と言われると、プログラミングのことが頭をよぎると思うのですが、Sassでの変数は、仕組みだけ理解しておけば大丈夫なので、そんな構えずに使っていきましょう。
変数の基本
変数とは、あらかじめ名前を決めておいて、その名前に値を代入しておくことで、任意の場所で変数名を参照して、値を呼び出すことができるものです。
なんだか難しそうと思った方、全然難しくないので、まずは実際のコードを見てみましょう。
|
1 2 3 4 5 6 7 8 |
.box { border: 1px solid #ff0000; } .box .box-title { font-size: 18px; color: #ff0000; } |
普通のCSSファイルです。boxのborderの色とtitleの文字色が一緒です。Sassではこの色を変数として定義することができます。
|
1 2 3 4 5 6 7 8 9 10 |
$color-red: #ff0000; .box { border: 1px solid $color-red; .box-title { font-size: 18px; color: $color-red; } } |
Sassだとこのように書くことができます。最初に$color-redを宣言しておくことで、同じ色を使うときはこの変数を書けばよくていちいちカラーコードを書く必要もありません。
もしデザイナーさんが、やっぱり赤色のカラーコードを変えるなどと言われても、$color-redのカラーコード一箇所を変えるだけで、変数で指定した全ての赤色が変わることになります。
変数名が使えない場合
|
1 2 3 |
@height: 100px; ---height: 100px; 100height: 100px; |
- @といった記号から始まるとき
- --といったハイフンから始まるとき
- 数字から始まるとき
この３つが変数名が使えないときです。その他では割となんでも変数名として使うことができ、日本語で$赤色とやっても大丈夫ですし、$height１００といった全角数字を変数に使うこともできます。
変数が参照できる範囲
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.box { $color-red: #ff0000;// セレクタ内でも変数は定義できる border: 1px solid $color-red; .box-title { font-size: 18px; color: $color-red; } } //この場合borderの赤色は反映されない .box-large { border: 1px solid $color-red; } |
このようにセレクタ内でも変数は定義できますが、この場合は子要素でない他のセレクタには$color-redという変数を使うことができません。覚えておきましょう。
UX MILKチームでも導入している情報共有ツールDocBaseのプロダクトオーナーである天野さんへのインタビューです。 UX MILKチームでは毎日、DocBaseにメモを投稿しているのですが、使…
『クイズRPG 魔法使いと黒猫のウィズ』や『白猫プロジェクト』など、誰もが知っているスマホゲームを提供している株式会社コロプラ。最近では、VRに注力していることでも話題になっています。 ゲームはよく…
いま転職したらどれくらいの年収になるのだろうと考えたことはありますか？ また、デザイナーとしてのキャリアパスや市場価値などは気になる人も多いのではないでしょうか。 そこで、今回はデザイナーの市場価値…
