演算
Sassでは四則演算を行うことができます。それぞれ次の記号を使います。
加算 +
減算 -
乗算 *
除算 /
除算だけは計算式を丸括弧（）で囲みます。fontプロパティで使用する記号がバッティングするための処置のようです。
Sassのコード
[sass]
.section1{
width:300px + 30;
}
.section2{
width:300px * 3;
}
.section3{
width:(1000px / 3);
[/sass]
色情報に演算式を使う
演算式は色の値を計算することもできます。
例えば次のボタンのサンプルではベースになるボタンのデザインは「.btn」でデザインしており、「.primary」で色の設定を行っています。
余談になりますが、こうすることで汎用性が高まります。ボタンのベースのデザインはBootstrapのボタン作成のコードに見習っています。
Bootstrapのコードは非常にうまく書かれていますので、ボタンなど小さなパーツを作成するときにお手本にすると良いでしょう。
参考：Bootstrapの使い方（５）〜ボタンの作成
「.primary」をマウスホバーした時の色の設定は、「$bg-color*0.9」の計算結果を使っています。Sassでは、16進数の色情報に演算を使うことができます。このサンプルでは、16進数の値に0.9を掛けることで色を少し暗くしています。掛ける値を０に近づけるほど黒に近くなり、逆に1.0から大きな値になるほど白に近づきます。
[sass]
$bg-color:#46A8FB;
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.primary {
color: #fff;
background-color: $bg-color;
&:hover{
background-color: $bg-color*0.9;
}
}
[/sass]
コンパイル後のCSS
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.primary {
color: #fff;
background-color: #46A8FB;
}
.primary:hover {
background-color: #3f97e1;
}
組み込み関数
Sassには関数があらかじめ用意されています。
ここでは一部のみ紹介です。
abs() 数値の絶対値を取得
round() 小数以下を四捨五入
ceil() 小数以下を切り上げる
floor() 小数以下を切り捨てる
lighten(#f00,30%) 明るい色を作る
darken(#eee,30%) 暗い色を作る
ユーザー定義関数
@functionを使ってユーザー定義関数を作成することができます。
@function 関数名($引数){
@return 戻り値;
}
具体例は次のようになります。
[sass]
@function quarter($value){
@return round($value / 4);
}
[/sass]
いきなりreturnするのか・・・
一般的なスクリプトのfunctionのように色々な命令文とか書けないのかなと思いますが、Sassのユーザー定義関数は、cssのプロパティの値を計算する手段としてあるようです。
例えばプロパティーから記述をして色々なルールを作れれば良いのにと思うのですが、実はそれはミックスインという仕組みで実現されています。
ミックスインは次回説明します。
組み込み関数を使った色情報の変更
先程は色情報に演算を使った例を説明しましたが、Sassにはすでに組み込み関数として色情報を操作できる便利なものが用意されています。
例えば先程のボタンのサンプルでマウスホバーしたときの設定を組み込み関数を使うともっと具体的に表現できます。
「.btn」の設定は上のサンプルと同様です。「.primary 」の「:hover」の設定にdarken()を使いました。
darken()はlighten()と共に明度を調整する組み込み関数です。暗くしたい場合にdarken()、明るくしたいばあいにはlighten()を使用します。
第1引数は色情報、第2引数は明るさのパーセンテージを入れます。
[sass]
$bg-color:#46A8FB;
.primary {
color: #fff;
background-color: $bg-color;
&:hover{
background-color: darken($bg-color, 10%);
}
}
[/sass]
コンパイル後のCSS
.primary {
color: #fff;
background-color: #46A8FB;
}
.primary:hover {
background-color: #1491fa;
}
以下はBootstrapのボタンの色指定をミックスインで行っているところです。:hover時の背景色指定にdarken()が使用されています。
参考：BootstrapのSassコードの一部
[sass]
@mixin button-variant($color, $background, $border) {
color: $color;
background-color: $background;
border-color: $border;
//一部省略
&:hover {
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 12%);
}
//以下省略
}
[/sass]
