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

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

演算の基本

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

.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の値が変わると、widthの値も変わるようになっています。わざわざ変更する必要がなく、とても便利です。

演算を使う場合の注意点

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

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

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

イベント