@ Sass

Sassの演算

演算の基本

Sass では、プログラミング言語のように演算が使えます。これにより、paddingやborderの値を引いてwidthの値を求める、といった計算結果をコンパイル後の CSS に出力することができます。

style.scss

.example01 {
  width: 500px + 8;
}
.example02 {
  width: 500px - 8;
}
.exapmle03 {
  width: 500px * 8;
}
.example04 {
  width: (500px / 8);
}

コンパイル後の CSS は次のようになります。

style.css

.example01 {
  width: 508px;
}
.example02 {
  width: 492px;
}
.exapmle03 {
  width: 4000px;
}
.example04 {
  width: 62.5px;
}

変数と演算を同時に利用する

Sass では、それぞれの機能を併用することが可能なため、変数にたいしても演算を利用することができます。

style.scss

$main_width: 500px;
article {
  $padding: 7px;
  width: $main_width - $padding * 2;
  padding: 0 $padding;
}

コンパイル後の CSS は次のようになります。

style.css

article {
  width: 486px;
  padding: 0 7px;
}

色の演算

Sass の演算機能を使って、色を演算することもできます。主に :hover 擬似クラスなどで使います。

style.scss

$color: #333;
a.sample01:hover {
  color: $color + rgb(51,51,51); // rgb(51,51,51);=#333333
}
a.sample02 {
  color: blue + $color; // blue=#0000ff
}
a.sample03 {
  color: $color - 3;
}
a.sample04 {
  color: rgb(255,255,255) - 10;
}

コンパイル後の CSS は次のようになります。

style.css

a.sample01:hover {
  color: #666666;
}
a.sample02 {
  color: #3333ff;
}
a.sample03 {
  color: #303030;
}
a.sample04 {
  color: whitesmoke; /* rgb(245,245,245) */
}

演算子の注意点

+(足し算)

加算の他に、テキストを結合するために使うことができます。

style.scss

@charset "utf-8";
p:after {
  content: "今日は" + 寒いです。;
  font-family: sans- + "serif";
}

コンパイル後の CSS は次のようになります。

style.css

@charset "UTF-8";
p:after {
  content: "今日は寒いです。";
  font-family: sans-serif;
}

-(引き算)

-5px などのマイナス値と区別するために-(ハイフン)の前後に必ず半角スペースを入れる必要があります。

*(掛け算)

色の演算をした際に、上限を超えた計算はされないので、注意が必要です。

/(割り算)

割り算では、演算処理をするために次の条件のうちいずれかを満たす必要があります。

  1. 値に変数が使われている。
  2. 演算を () で囲っている
  3. 他の演算子(+ – *)と一緒に使用されている

style.scss

.division01 {
	$value: 50px;
	width: $value / 2;
}
.division02 {
	width: (50px / 2);
}
.division03 {
	width: 50px - 50 / 2;
}

コンパイル後の CSS は次のようになります。

style.css

.division01 {
  width: 25px;
}
.division02 {
  width: 25px;
}
.division03 {
  width: 25px;
}