Sassの勉強 #04 Sassの基本的な機能「演算」
数値の演算を使う
プロパティの値に演算を使うとコンパイル後には計算結果を返してくれます。足し算「+」、引き算「-」、掛け算「*」、割り算「/」が使えます。例えばこんな感じ。
#test{
width:800px - 20*2px;
padding:0 20px;
}
/* コンパイル後 */
#test {
width: 760px;
padding: 0 20px;
}
上の例では左右のpadding分の幅を元のwidthから引き算したい場合を考えて書きましたが、普段暗算や計算機で一旦計算してからcssに書いていたものが計算式だけでOKなのでとても便利。また、元のwidthの値をscssファイルに残しておけるのも後から確認する際にとても楽ですね。
単位
プロパティの計算式の単位部分で、片方の単位を省略して書いた場合、もう片方の単位に合わせてくれます。「800px – 20」と書いた場合、「780px」とcss側にも書いてくれる、みたいな。
また、計算式部分で扱う単位が違っていても、sass側で勝手に計算してくれます。
#test{
width:800px - 2cm;
}
/* コンパイル後 */
#test {
width: 724.40945px;
}
こんな感じで自動的に計算してくれます。
但し、絶対単位と相対単位の組み合わせでは計算出来ません。（pxとemなど）その場合「互換性がない」っていう感じのエラーが出ます。
変数と共に使う
もちろん変数と一緒に使う事も可能。
$testWidth : 800px;
$testPadding : 10px;
#test{
width:$testWidth - $testPadding * 2;
}
/* コンパイル後 */
#test {
width: 780px;
}
色の演算を使う
Sassの機能を使って色の演算も出来ます。16進数のカラーコード(3桁でも6桁でも)、rgb()、キーワード、数値が使えます。
rgb()、キーワードで指定した場合は16進数に変換してから演算、数値を指定した場合はR、G、Bの3つの値に対して演算が行われるということらしいです。計算された値がキーワードに該当する場合はコンパイル後はキーワードに自動的に変換されます。
Web制作者のためのSassの教科書 – 公式サポートサイトのサンプルソースがすごくわかりやすかったので、そのままお借りして…
// 変数 + 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.sample01:hover {
color: #666666;
}
a.sample02:hover {
color: #3333ff;
}
a.sample03:hover {
color: #303030;
}
a.sample04:hover {
color: whitesmoke;
}
こんな感じになります。
色に関しては、Sassで用意されている関数も色々あるみたいなので、また後で勉強してみます。
Sassの勉強 関連記事
- Sassの勉強 #00 もっかい最初からやり直そうSassの巻
- Sassの勉強 #01 Sassとは何か？～環境構築
- Sassの勉強 #02 Sassの基本的な機能「ネスト」
- Sassの勉強 #03 Sassの基本的な機能「変数」
- Sassの勉強 #04 Sassの基本的な機能「演算」
- Sassの勉強 #05 Sassの基本的な機能「@import」
- Sassの勉強 #06 スタイルの継承ができる「@extend」
- Sassの勉強 #07 柔軟なスタイル定義が出来る「@mixin」
- Sassの勉強 #08 制御構文(条件分岐・繰り返し)
- Sassの勉強 #09 @at-root
- Sassの勉強 #10 Sassの勉強 #10 関数一覧(Ver.3.4) と自作関数