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

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

演算の基本

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

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

変数と演算を同時に使うとき

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

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

演算を使う場合の注意点

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集