SCSSの変数

概要

CSS変数にもあるようにCSSでも変数は使用することができるがSCSSではさらに柔軟に使用することができる。

使用方法

宣言

SCSSの変数は以下のように記述することができる。

$color: #000;

$記号からスタートし、そこに値を格納していく。
値を使用する場合には以下のように記述する。

background-color:  $color$

クラス名に使用

クラス名にも変数を使用することができる。

$prefix: ".scss";
 
//この時は#{}で変数を囲む。
#{$prefix}-text{
	...
}

スコープ

scss変数はスコープが適用される。

$color: black;  // グローバル変数の定義
 
body {
  color: $color;  // グローバル変数の参照
}
 
main {
  $color: red;    // ローカル変数の定義
  color: $color;  // ローカル変数の参照
}

型

型としては、

1. Number型
2. Color型
3. String型
4. Boolean型
5. Null型
6. List型
7. Map型（連想配列）
   が使用することができる。

例としては以下のようになる。

$number: 100px; 
$color: #f00; 
$string: "文字列"; 
$boolean: false; 
$null: null; 
$list: 10, 20, 30, 40; 
$map: (a:0, b:1em, c:2em, d:3em);

演算

scssでは基本的な四則演算記号(+-*/)が使用できる。

margin: 20px + 20px;