Sassの便利な7つの機能

Sassとは?

Sassは、CSSを便利に使えるように拡張したメタ言語です。
SassにはSCSS記法とSass記法の二つのの記述方法があります。
Sassの場合は「.sass」SCSSの場合は「.scss」という拡張子に記述します。

ここでは、SCSS記法を使ってSassの基本的な機能について紹介していきます。

変数

sass

sassでは変数が使えるので、値を定義することができます。指定の仕方は、$マークの後に変数名です。

$blue : #42A5F5;

.hoge {
    color: $blue;
}
css
.hoge {
  color: #42A5F5;
}

ネスト

ネスト(入れ子)にしたセレクタは、Sass側で変換して出力してくれます。

sass
#hoge {
background: #000;

    div {
        background: #333;

        p {
            background: #666;
        }
    }
}
css
#hoge {
  background: #000;
}
#hoge div {
  background: #333;
}
#hoge div p {
  background: #666;
}

親セレクタの参照

&(アンパサンド)を使うことで、親セレクタを参照することができます。

sass
a {
    color: #000;

    &:hover {
        color: #333;
    }
}
css
a {
  color: #000;
}
a:hover {
  color: #333;
}

mixin

mixinに任意の名前を定義し、@includeで呼び出します。

sass
@mixin noto_serif {
    font-family: 'Noto Serif Japanese', serif;
}
.hoge {
    @include noto_serif;
}
css
.hoge {
    font-family: 'Noto Serif Japanese', serif;
}

@import

複数のファイルに分けることをパーシャルと言い、パーシャルを使用するとファイルを分割して管理することができます。
ファイル名の先頭に、アンダースコアが付いたファイルは、個別のCSSファイルとしてコンパイルされません。
例:_layout.scss
パーシャルしたファイルは、@importで読み込めます。

sass
@import "layout";

@extend

sassでは、セレクタの継承が利用できます。

sass
.hoge1 {
    color: #000;
}
.hoge2{
    @extend .hoge1;
    padding:0;
}
css
.hoge1, .hoge2 {
    color: #000;
}
.hoge2 {
    padding: 0;
}

四則演算

四則演算も行うことができます。Sassはそれぞれの機能を組み合わせて使えるので、変数に対して演算を行うこともできます。

sass
$width: 100px;
 
#contents {
	width: $width - 20;
	padding: 10px;
}
css
#contents {
  width: 80px;
  padding: 10px;
}

まとめ

まだほかにも様々な機能がありますが、今回は基本的な機能を紹介しました。
Sassに慣れてくるとコーディングを効率化することができます。
うまく取り入れることで生産性を高めていけたら良いですね。

一覧へ戻る