2016/6/14更新

Sassの便利な8つの機能

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

Sassの便利な機能

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

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

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: #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;  
}

$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 {

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) {

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) {

@return round($value / 2);

}

.box-item {

width: half-size(300px);

}

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

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

$general-style: true;

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

$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";

@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を使うことで１つのCSSファイルとして書き出すことができます。

CSS Sass