Sassの便利な8つの機能

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

Sassの便利な機能

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

a {
    color: black;
    &:hover {
        color: blue;
    }
}

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

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

$base_color: #000;

p {
    font-color: $base_color;
}

.about {
  .about-text {
      font-color: $base_color;
  }  
}

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

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

$base_width: 800px;  
   
#main-contents {  
    width: $base_width - 100;  
    padding: 10px;  
} 

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

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

.button {
    display: inline-block;
    border: 1px solid gray;
    background-color: #000;
    color: #fff;
}

// .button セレクタを継承・拡張したもの
.button-submit {
    @extend .button;         // .button を継承
    background-color: blue; // プロパティを上書き
    border-radius: 4px;      // 新たなプロパティの追加
}

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

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

@mixin border($color:#000) {
  border-bottom: 1px solid $color;
}
.header {
  @include border(#c0c0c0); 

  .nav {
    @include border;
  }
}

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

関数を使うことができる

@function half-size($value) {
	@return round($value / 2);
}

.box-item { 
	width: half-size(300px); 
}

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

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

$general-style: true;

@if $general-style {
    .content {
       float: left;
    }
    @else {
       .content {
            float: none;
       }
    }
}

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

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

@import "top.scss";
@import "about.scss";
@import "news.scss";
...

@import "module/button.scss";
@import "module/headline.scss";

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


イベント

2017/10/06(金)
UX School(全10回)