REDLINE MAGAZINE | Sassの勉強 #03　Sassの基本的な機能「変数」REDLINE MAGAZINEトップページへ

メニューをスキップして本文へ

旧ブログナビ (open/close)

Sassの勉強 #03　Sassの基本的な機能「変数」

Sassで変数を使う

「変数」ってものについては特に書かなくてもいいかと思うのですが、まぁ一応Wikipediaのリンクだけ置いておきます。

>>変数 (プログラミング) – Wikipedia

Sassの変数の宣言は「$」から始まる変数名の後に「：」と「値」、最後に「;」を指定する。

$変数名 : 値 ;　

その変数を参照したい時は、使いたいプロパティの値部分にその「$変数名」を記述する。

変数を使って同じ値を使いまわす事が出来る上に、値の変更が必要になった際も変数を宣言している部分１か所だけを変更すればOKという素晴らしい具合。

/* 変数の宣言 */
$red:#f00;
/* 変数を使う */
#sample{
	color:$red;
}

/* コンパイル後 */
#sample {
  color: #f00;
}

変数のデータ型

使用できるデータ型は以下の7つ。

  • 数値（1.2, 13, 10px・・・など）
  • 文字列（"foo", ‘bar’, baz・・・など）
  • 色（blue, #04a3f9, rgba(255, 0, 0, 0.5)・・・など）
  • 真偽（true, false）
  • Null（null）
  • リスト（1.5em 1em 0 2em, Helvetica, Arial, sans-serif・・・など）
  • maps from one value to another （(key1: value1, key2: value2)・・・など）

最後のやつだけよくわかんかったのですが、多分Ver3.3で追加されたSource Maps関連の何か（だと思いたい）。コンパイルする度にhoge.css.mapっていうファイルが出力されるのだけれども、その辺りもまた含めて今度調べる。デバック用っぽいけど。

SourceMapとは、元のソースと生成されたソースの対応関係の情報を持ったファイルで、例えばコンパイルされたcssファイルのこの行はオリジナルのSassファイルの方では何行目ーみたいなことがわかるやつ。そこまでは把握した。とりあえず今は変数の勉強だから放置。でも便利そう！後で！

変数のスコープ

変数のスコープ(参照範囲)ですが、呼び出したいルールセットより前ならどこでもOK。ルールセット内で変数の宣言を行えば、ルールセットの外側からは参照できない。

※以前のバージョン(v3.2系)ではドキュメントルートで宣言したグローバル変数とルールセット内で宣言したローカル変数が同じ場合は、スコープを抜けてもローカル変数の値が上書きされていたが、現行バージョン(v3.4系)ではグローバル変数の値が上書きされることはなくなっている。

※v3.3系ではルールセット内の宣言からグローバル変数を上書きしようとすると警告が出る仕様で、それを防ぐために「!global」フラグを使用して明示的に上書きしている事を知らせる必要があったみたいだけれども、現行のv3.4系ではそれもまた不必要となっている。

故に、変数のスコープに関しては、グローバル変数とローカル変数の区別さえ付ければ、特に他に注意する事なく使えるようになっている。

インターポレーション「#{}」

宣言した変数を値の一部として使いたい時や、プロパティの値以外から参照したい時など、本来変数を参照できない場所から使いたい場合は「#{}」インターポレーションを使用する。

例えばこんな感じ。

// 画像のパスの一部に変数を使う場合

$testPath : '../image/';

#testImage{
	background:url(#{$testPath}test.png);
}

/* コンパイル後 */
#testImage {
  background: url(../image/test.png);
}

// セレクタ名に変数を使う場合

$testBlock : '#test01,#test02';

#{$testBlock}{
	width:100%;
}

/* コンパイル後 */
#test01, #test02 {
  width: 100%;
}

「#{}」は演算を意図的にさせたくない時や演算できない場所で演算させたい時などにも使用できる。ダブルクォーテーションで囲っている変数の値を参照したい場合に二重にならないようアンクォートさせてくれたりもするらしい。

本来変数を参照できない場所で変数を使えるようにするのが「#{}」←覚える。

変数にデフォルト値を割り当てる「!default」

変数の値の後にデフォルト値を指定することが出来るのが「!default」フラグ。変数の値が宣言されていない時には変わりにこれを指定しますよってやつ。

すでに変数の値が指定してある場合、「!default」がついた値が再度割り当てられる事はない。

変数のデフォルト値を指定するのが「!default」←覚える。

本によるとSassファイルを分割して運用する際なんかに良いみたいです。

Sassの勉強　関連記事

カテゴリ：
Sass
タグ：
,

このページの一番上へ

コメントを残す

メールアドレスが公開されることはありません。

このページの一番上へ