Sass

Sassとは

SassとはCSSの機能を拡張した言語です。Sassを使用することでCSSを効率的に書けるようになります。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができます。

Sassファイル

Sassは通常のCSSファイルには記述することができません。反対にSassファイルにCSSを記述することはできます。Sassを扱うファイルの拡張子は.sassと.scssの2種類があります。どちらもSassのファイルとなりますが記法が大きく異なります。

.sass拡張子

Sassファイルでは最初に作られたSassの記法を扱うことが出来ます。Sassは波カッコの省略やセミコロンが不要などシンプルな記法です。
【例】Sass

xxxx.sass

.body p
  color: #333
  font-size: 10px
  font-weight: normal
  strong
    color: red
    font-weight: bold

.scss拡張子

.sassの後に作られたSassファイルが.scssの拡張子のファイルです。scssはCSSに非常に似た記法でSassの機能を使うことが出来ます.
【例】

xxxx.scss

.body p {
  color: #333;
  font-size: 10px;
  font-weight: normal;
  strong {
    color: red;
    font-weight: bold;
  }
}

記述の簡略化

例えば親子関係にあるセレクタを入れ子にして書くことができます。
CSSでは、親の要素から対象要素までのセレクタを何度も書く必要がありますが、Sassはネストさせることで、同じ親のセレクタをまとめることができます。
【例】例えばこんなhtmlがあるとします

xxxx.html

<div class="block">
  <h1 class="title">XXXX</h1>
  <p class="text">YYYY <span>ZZZZ</span>
</div>

【例】CSSの場合

xxxx.css

.block {
  background-color: #000;
}

.block .title {
  color: #FFF;
  font-size: 50px;
  text-align: center;
}

.block .text {
  font-size: 10px;
  color: #FFF;
}
.block .text span {
  color: red;
  font-size: 20px;
}

【例】sassの場合

xxxx.scss

.block {
   background-color: #000;
  .title {
    color: #FFF;
    font-size: 50px;
    text-align: center;
  }
  .text {
    font-size: 10px;
    color: #FFF;
    span {
      color: red;
      font-size: 20px;
    }
  }
}

SassではCSSをネスト(入れ子)して記述することができます。ネストして記述することで深い階層になっても親子関係がわかりやすくなり、親要素を複数記述しなくて済みます。

変数や条件分岐といったプログラムのような処理を記述できる

Sassでは、変数を使用することができます。例えばピクセル数やカラーコードなどの何度も使用する値を変数を定義することで、変数名で何度も使用することができます。変数を定義するには、$変数名: 値;のように記述します。
【例】

xxxx.scss

$section-color: rgb(30,30,30);
section {
  background-color: $section-color;
}

複数のCSSファイルを1つにまとめることができる

Sassではパーシャルという機能を使用することで、複数のSassファイルを1つのCSSファイルとしてまとめることができます。

パーシャル

分割したSassファイルのことです。ファイルを分割することで、機能や内容ごとに管理ができるようになります。一定のルールでファイルを分割して開発することで変更・修正がしやすくなります。
パーシャルファイルを作成するには、ファイル名を_（アンダースコア）から始めます。パーシャルファイルを読み込むには、@importファイル名と記述します。
【例】__reset.scssと_header.scssを読み込むとします

xxxx.scss

@import "reset";  /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */

同じ値を使い回すことができる

CSSでは、複数の要素に同じスタイルを適用させる場合、何度も同じスタイルを記述します。しかし、Sassでは変数を使うことによって、同じ値を使い回すことができます。
変数を定義するには、$変数名: 値;で記述します。
【例】

xxxx.scss

$mainYellowColor: #FFEC00;  /* #FFEC00という色をmainYellowColorという変数名で定義する */

また、mixinという機能を使用することで、同じスタイルをまとめることもできます。

mixin

まとまったスタイルを定義することができる機能です。
変数は値を定義するものですが、mixinはスタイルを定義するものです。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなります。
mixinを定義するには、@mixin mixin名() {}のように記述します。
【例】.clearfix(レイアウトが崩れてしまった際に役立つ機能)を使用します。以下のように_clearfix.scssファイルに定義します。

_clearfix.scss

@mixin clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

&(アンパサンド)は、擬似要素であるafterが適用されているセレクタを指します。以下の例では、&は.menuに相当します。
つまり、擬似要素afterは、.menuに対して適用されているということです。
このmixinの呼び出しは@includeを使用して以下のように記述します。

_XXXX.scss

.menu {
  @include clearfix();
  ...

  .menu__list {
    float: left;
    ...
  }
}

XXXX.scssの記述は以下のSassコードと同じです。

_clearfix.scss

.menu {
  &:after {
    content: '';
    display: block;
    clear: both;
  }

  .menu__list {
    float: left;
    ...
  }
}