Sassの変数のルール

sass

変数の基本

変数宣言

Sassで使う変数のルールは他の言語と同じように
変数の宣言とその中にプロパティの値を代入するという基本ルールが前提である。

他の言語での変数宣言は

$変数名 = 値;

だが、Sassでは

$変数名 : 値;
という風に=(イコール)ではなく:(コロン)で変数名と値を繋げる。


変数の値は基本的に後述の値に上書きされる。

同じ変数名で異なる値を複数宣言した場合、その変数の値は宣言された順次に上書きされる。



sass

$num : 3;
$value : 150;
@while  $num > 0{
 
 .main#{$num} {
	 width: $value +px;
	} 
 $num : $num - 1;
 $value : $value - 50;
}

css(コンパイル後)

.main3 {
  width: 150px;
}

.main2 {
  width: 100px;
}

.main1 {
  width: 50px;
}


このように$valueの値が@while文で繰り返しするたびに-50ずつ減っていき、最終的に
$valueの値は50で収まる。

変数名について

変数名は他言語と同じように基本的に頭文字に$をつけて宣言する。


sass

$black : #000000;
$largeSize : 36px;
$glay_dotted : 1px dotted #333333

また、マルチバイト文字も使用可能なので日本語宣言もOK。

$横幅中央揃え : 0 auto;



最後に、変数名で使えない文字のルールや変数に入れられない値。

$10size : 10px;//数字で始まる
$@link : http://www.xxxx.xxxx;//@など使えない文字と、//(スラッシュ2つ)以降の文字はコメントアウトされるので値に入らない。
$--heigt : 100px;//連続ハイフンで始まる文字

変数に格納できるプロパティ

  • カラーコード,
  • ピクセル,%(パーセンテージ)などの数値
  • borderなどで使用する複数のプロパティ(1px dotted #333333など)

など大体の値を入れられるのだが、注意しなければならないのが
「セレクタ名」と「参照などで使用するのパス」です。
これを以下の様に記述するとエラーがでます。

sass(エラー文)
$コンテンツ : '.contentBox';

$image_path : '../img/bg/';

$コンテンツ{
	background: url($image_pathsample.jpg);
}

このエラーを解消して正しくコンパイルするには
次のように”#{変数名}”と書いてインタポレーション(補完)を行います。

インタポレーション(補完)については後日、補足します。

sass(インタポレーションで囲い)
$コンテンツ : '.contentBox';

$image_path : '../img/bg/';

#{$コンテンツ}{
	background: url(#{$image_path}sample.jpg);
}


cssコンパイル後
.contentBox {
  background: url(../img/bg/sample.jpg);
}

ルールセット内で変数は有効となる

変数はルールセット{~}(波括弧内)で宣言されたものはそのルールセットの中でのみ有効である。
宣言されたルールセット外からの参照は受け付けられない。

変数の注意点

どのルールセットにも属さない(ドキュメントルールセット)で宣言された変数がある場合、
ドキュメントルールセットで宣言された変数名と、ルールセットで宣言された変数名が同じ場合は
後述で宣言された変数のプロパティに上書きされてしまいます。

sass
$value :100px; //←ドキュメントルールセット

//↓ルールセット
.box{
  
 $value : 50px;

 & section{
	width: $value;
	}
}


cssコンパイル後
.box section {
  width: 50px;
}

以上のように、ドキュメントルールセットで宣言された$valueのプロパティ,100pxが
次のルールセットで宣言された同名の$valueで50pxに上書きされてしまうので凡庸性のある
変数名はドキュメントルールセットで宣言すると気づかないうちに値が狂ってしまう可能性がありますので
$width_value や$smallSizeといった風に接頭辞を付け加えるなど工夫が必要です。