sass_3-6 演算

sassの演算について勉強した。

こんな風に書くことが出来る。

article {
  width: 560px - 14px;
  padding: 7px;
}

実際に書きだすとこうなる。

article {
  width: 546px;
  padding: 7px;
}

マイナスした分の値が引かれているのが分かる。
下のように色々と足したり引いたり出来る。

// 足し算
.example01 {
  width: 500px + 8;
}
// 掛け算
.example02 {
  width: 500px * 8;
}
// 割り算
.example03 {
  width: (500px / 8);
}

結果、こうなる。

.example01 {
  width: 508px;
}
.example02 {
  width: 4000px;
}
.example03 {
  width: 62.5px;
}

足し算は足し算でも、こんな風に足すことも出来る。

article {
  width: 300px + 5cm;
}

結果、こうなる。

article {
  width: 488.97638px;
}

cmという単位で足せるのに驚いた。
実際使う機会あるのかと思うけど。

変数と一緒に使ったりもできる。

$main_width: 560px;

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

$main_width: 560px;

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

2つあるけれど、結果は同じ。

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

色を指定するときにも活躍したりする。

a {
  color: #000 + #111;
}

$font_color: #333;

a.sample01:hover {
  // 変数 + rgb() 関数
  color: $font_color + rgb(51,51,51);
}
a.sample02:hover {
  // キーワード + 変数
  color: blue + $font_color;
}
a.sample03:hover {
  // 変数 - 数値
  color: $font_color - 3;
}
a.sample04:hover {
  // rgb() 関数 - 数値
  color: rgb(255,255,255) - 10;
}

結果はこうなる。

a {
  color: #111111;
}

a.sample01:hover {
  color: #666666;
}
a.sample02:hover {
  color: #3333ff;
}
a.sample03:hover {
  color: #303030;
}
a.sample04:hover {
  color: whitesmoke;
}

参考

【Sassを覚えよう！Vol.9】変数と演算で効率的に - CSS HappyLife