Sassの便利な8つの機能

SassはCSSにはできない、コードを書く手間を減らしたり、運用しやすくする機能などがあります。今回はそういったSassならではの便利な機能を、1つずつ紹介していきたいと思います。

Sassの便利な機能

入れ子(ネスト)が使えるので、記述が省略できる

通常CSSでは一つのタグやクラス名に対し、一つのカッコで完結するのが普通ですが、Sassだと、上記のコードのように入れ子にして書くことができるので、長々と階層を書かなくても良いのです。

変数を使って同じ値を使いまわすことができる($base-colorなど)

変数を使えば、最初に定義したものを何度も使えて、もし色が変わっても$base_colorの一箇所を変えるだけで変更ができ、全部を打ち直す必要がない便利な機能です。

演算を使うことができる(widthからpaddingを引いたり、割ったり)

CSSでは演算など使えなかったのですが、Sassでは、width(幅)などや文字に演算を使うことができます。スラッシュ(/)などを使って幅などを3分割にすることもできるので、レイアウトなどにも便利です。

CSSのスタイルを継承することができる(@extend)

buttonというクラスを作って、スタイルを書き、もしそのスタイルに似たものを作りたい場合、再度書くのは文量も増えるし、面倒臭いようなときに@extendが便利です。既存のクラスの引き継いだまま、新しくスタイルを書き加えたりすることができます。

柔軟にスタイルが定義できる(@mixin)

@mixinを使えば、border($color:#000) のように引数を使うことができます。また、extendと違う点は、CSSファイルに変換されたとき、クラス名がグループ化されないことです。

関数を使うことができる

関数については, プログラミングの知識が必要ですが、上記のコードを使って説明すると、@functionで定義されたhalf-sizeという関数があって、機能としては$valueという変数に入った数値を2で割って返してくれるようになっています。こうすることで、後にhalf-size()と書いたとき、このカッコにはいる数値に対して同じ処理をしてくれます。このコードだとwidthが150pxになります。

条件分岐や繰り返し処理を行うことができる(ifやforなど)

これもまた、プログラミングの知識が必要ですが、もしAが正の場合B、誤の場合Cなどの条件分岐も可能です。この場合だと真偽値がtrueなので、float: left;といったスタイルが適用されます。

複数のCSSファイルを1つのCSSファイルに圧縮できる

CSSの場合、複数CSSファイルがあると、<head></head>内に一個ずつ読み込まなければいけませんでした。Sassであれば@importを使い、RubyやKoalaを使うことで1つのCSSファイルとして書き出すことができます。


Welcome to UX MILK

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

このサイトについて

イベント