2016/6/14更新

Sassの便利機能：演算について

widthの値を、違う値とを足したものにしたいと思ったときに、Sassの便利な機能で演算というものを使うことができます。演算とは実際にどういうものなのか、説明していきたいと思います。

演算の基本

演算とは、 +, -, *, / を使った、足し算、引き算、掛け算、割り算のことを言います。CSSファイルに変換されると計算され、正式な値が出てきます。

.box1 {
    width: 100px + 100px;
}

.box2 {
    width: 400px -200px;
}

.box3 {
     width: 100px * 2;
}

.box4 {
     width: 400px / 2;
}

.box1 {

width: 100px + 100px;

}

.box2 {

width: 400px -200px;

}

.box3 {

width: 100px * 2;

}

.box4 {

width: 400px / 2;

}

上記のコードだと全てのボックスセレクタのwidthが200pxになります。このようにセレクタの値の中で演算をすることができます。

演算は、変数と同時に使うこともできます。

$box-width: 300px;

#content {
    width: $box-width * 3;
}

$box-width: 300px;

#content {

width: $box-width * 3;

}

このように$box-widthの値が変わると、widthの値も変わるようになっています。わざわざ変更する必要がなく、とても便利です。

演算では文字を扱うことも可能です。-（ハイフン）と-（マイナス）を区別するために、値の後には半角スペースを空けましょう。

//SCSS
h1 {
    font-family: sans- + "serif";
}

//CSSに変換後
h1 {
    font-family: sans-serif;
}

//SCSS

h1 {

font-family: sans- + "serif";

}

//CSSに変換後

h1 {

font-family: sans-serif;

}

Sass