これは CSS Preprocessor Advent Calendar 2012 の 5 日目の記事です。 今日はあまり知られていない Sass の if 関数について紹介したいと思います。 Sass には、条件分岐のための制御構文として @if ディレクティブ(いわゆる if 文)が用意されています。 $type: ocean; p { @if $type == ocean { color: blue; } @else { color: black; } } Sass の紹介記事の中では必ずと言っていいほど出てきますし、皆さんも一度は使ったことがあるのではないでしょうか。 実はこの @if ディレクティブ以外に、Sass には if 関数が標準で用意されています。 上のコードを if 関数を使って書き直すと、次のようになります。 $type: ocean; p { color: if(
![Sass の if 関数 - jmblog.jp](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b9feac44c9fe48498b2712c5224e78e578272c4/height=288;version=1;width=512/https%3A%2F%2Fjmblog.jp%2Fog-images%2F2012-12-05-sass-if-function.png%3F1709033554032)