Sassの変数〜Sass（３） | IT工房

Sassでは変数を使用することができます。グローバル変数の仕様がSass v3.4から大きく変更されていますので注意してください。(この記事はSass 3.4.19で確認した内容です )
変数の宣言は$の後に変数名を書き、コロン（：）の後に値を指定します。イコール（＝）は非推奨なので使わないようにしましょう。
変数名は半角数字から始めることができませんので気を付けてください。通常多くのスクリプトの変数名は数字から始められらないものが多いです。名前を決めるときは数字から始まる名前は使用しないくせを付けると失敗しないと思います。

Sassの変数宣言
$変数名：値

具体的な使用方法としては次のようになります。
$primary:#333;でプライマリーになる色を指定して、明るめにする場合の色を$light:#ccc;で記述しておけば、さまざまな要素で指定しておいても、色の変更が出た場合でも変数の値を変更するだけで容易に変更することが可能になります。
ページ数の多いサイトなどでは助かります。もちろん、色以外にもサイズやフォントの種類など用途は多いです。

Sassのコード
[sass]
$primary:#333;
$light:#ccc;
.main{
width:80vw;
padding: 0 10px;
margin:auto;
background-color: #F3FB87;
a{
color:$primary;
text-decoration: none;
}
a:hover{
color: $light;
text-decoration: underline;
}

}
[/sass]

SassをコンパイルしたCSS
CSSコード

.main {
  width: 80vw;
  padding: 0 10px;
  margin: auto;
  background-color: #F3FB87;
}
.main a {
  color: #333;
  text-decoration: none;
}
.main a:hover {
  color: #ccc;
  text-decoration: underline;
}

変数のスコープ
Sassの関連記事

変数のスコープ

スコープとは変数を使うことができる範囲をいいます。
スコープがあることで同じ変数名でも違う値にして使用することができます。つまり判りやすい名前を変数名にして色々な場所でそれぞれの値を使用することができるものです。
例えば次のようになります。

変数を使ったサンプル

この例では「.main」と「.sub」の中で「$primary」と「$light」を指定しています。そうすることでそれぞれのクラスで別の値を設定することができます。更にその値はそれぞれのクラス内でしか使用できません。もし、「.sub」の「$primary:#8800A0」と$「light:#E17A97」を指定しない場合に「.main」の変数が使われる事はなく、エラーが出てしまいます。

Sass
[sass]
.main{
$primary:#333;
$light:#ccc;
width:80vw;
padding: 0 10px;
margin:auto;
background-color: #F3FB87;
a{
color:$primary;
text-decoration: none;
}
a:hover{
color: $light;
text-decoration: underline;
}

}
.sub{
$primary:#8800A0;
$light:#E17A97;
width:80vw;
padding: 0 10px;
margin:auto;
background-color: #FB97E8;
a{
color:$primary;
text-decoration: none;
}
a:hover{
color: $light;
text-decoration: underline;
}
}
[/sass]

CSSにコンパイルすると次のようになります。「.main」と「.sub」でa要素の文字色が別々の変数で指定した値に変わっていることが確認できます。

CSSコード

.main {
  width: 80vw;
  padding: 0 10px;
  margin: auto;
  background-color: #F3FB87;
}
.main a {
  color: #2A3DA5;
  text-decoration: none;
}
.main a:hover {
  color: #00AFCB;
  text-decoration: underline;
}

.sub {
  width: 80vw;
  padding: 0 10px;
  margin: auto;
  background-color: #FB97E8;
}
.sub a {
  color: #8800A0;
  text-decoration: none;
}
.sub a:hover {
  color: #E17A97;
  text-decoration: underline;
}

もし、これらの記述に加えてどのクラス名にも属さないように変数を指定するとどうなるでしょうか。
その例が以下のものです。「.main」にも「.sub」にも含まれない一番上に記述をしています。（このような記述をグローバル変数といいます）この場合はそれぞれのクラス内に指定された変数（限られた範囲内の変数をローカル変数といいます）の値が優先されます。そのためこのコードをコンパイルすると先程のCSSと同様になります。
そしてもし、それぞれのクラス内で変数の宣言がなかった場合は一番上に記述された変数の値が使われる仕組みになっています。

注意：グローバル変数の仕様はv3.4から大きく変更されています。「Web制作者のためのSassの教科書」や古いブログの記事では、ドキュメントルートで宣言したグローバル変数とローカル変数が同じ変数名の場合には、それ以降にグローバル変数を使用すると、ローカル変数の値でグローバル変数の値が上書きされると説明されています。けれども、現行の最新バージョンではグローバル変数が上書きされることはありません。

Sassコード
[sass]
$primary:#2A3DA5;
$light:#00AFCB;
.main{
$primary:#333;
$light:#ccc;
width:80vw;
padding: 0 10px;
margin:auto;
background-color: #F3FB87;
a{
color:$primary;
text-decoration: none;
}
a:hover{
color: $light;
text-decoration: underline;
}

コンパイル後のCSSコード

.main {
  width: 80vw;
  padding: 0 10px;
  margin: auto;
  background-color: #F3FB87;
}
.main a {
  color: #333;
  text-decoration: none;
}
.main a:hover {
  color: #ccc;
  text-decoration: underline;
}

.sub {
  width: 80vw;
  padding: 0 10px;
  margin: auto;
  background-color: #FB97E8;
}
.sub a {
  color: #8800A0;
  text-decoration: none;
}
.sub a:hover {
  color: #E17A97;
  text-decoration: underline;
}

.subに変数の指定をしなかった場合の挙動です。

}
.sub{
width:80vw;
padding: 0 10px;
margin:auto;
background-color: #FB97E8;
a{
color:$primary;
text-decoration: none;
}
a:hover{
color: $light;
text-decoration: underline;
}
}
[/sass]

コンパイル後のCSSコードを見ると、.subにはグローバル変数の値が使われています。

CSSコード

.main {
  width: 80vw;
  padding: 0 10px;
  margin: auto;
  background-color: #F3FB87;
}
.main a {
  color: #333;
  text-decoration: none;
}
.main a:hover {
  color: #ccc;
  text-decoration: underline;
}

.sub {
  width: 80vw;
  padding: 0 10px;
  margin: auto;
  background-color: #FB97E8;
}
.sub a {
  color: #2A3DA5;
  text-decoration: none;
}
.sub a:hover {
  color: #00AFCB;
  text-decoration: underline;
}

変数のスコープ

Sassの関連記事