Sassの変数と演算

Sassでも変数を定義することで、任意の場所で呼び出すことができます。
変数は「$変数名:値; → $mainColor: #3a86e0;」という形で宣言します。

変数とスコープ

どのるルールセットにも属さない変数は、グローバル変数として全てのルールセットから呼び出すことができますが、ルールセット内で宣言した変数はローカル変数となり、そのルールセット内でのみ呼び出すことができます。

#main{
  $mainColor: #3a86e0;
  border-bottom: $mainColor;
  a{
    color: $mainColor;
  }
}
#side{
  $mainColor: #3a86e0;
}

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

#main {
  border-bottom: #3a86e0;
}
#main a {
  color: #3a86e0;
}

#sideからは$mainColorを呼び出せないので、コンパイル時には無視されます。（エラーは出ない）

演算

演算は、+（足し算）や-（引き算）、または*（かけ算）、/（割り算）などを使うことで、コンパイル時に計算結果を返してくれます。

#main{
  $w:800px;
  width:$w;
  .left{
    width: $w / 2;
    float: left;
  }
  .right{
    width: $w / 2 - 10;
    float: right;
  }
}

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

#main {
  width: 800px;
}
main .left {
  width: 400px;
  float: left;
}
#main .right {
  width: 390px;
  float: right;
}

この例では、変数「w」に800pxを代入して

• .leftでは変数「w」を2で割る
• .rightでは変数「w」を2で割って10を引く

ということをしています。
覚えておくと便利なのでぜひ覚えましょう。

次回「 @import」