SASS(SCSS)とは? 利用するメリットを簡単に説明

Tags:

Sassとは?

SassはHampton Catlinが設計し、Natalie Weizenbaumが開発した「CSSのメタ言語」である。

メタ言語とは「ある言語について何らかの説明をするための言語」であり、Sassは「CSSに対して機能を拡張した言語」といえる。CSSをより効率よく書けるようにしたものだと考えればよい。

ちなみにSassは「Syntactically Awesome Style Sheets」の略で、「構文的にすばらしいスタイルシート」という意味である。

CSSと何が違うのか?

SassはCSSのメタ言語なので、「CSSに対して機能を拡張した言語」である。

通常はCSSでも問題なく作業できるが、その量が膨大になるにつれてだんだん大変になってくる。また修正があると一つ一つ修正する必要があり、手間がかかる。

Sassを使うと、通常書かなければならない量を減らせ、修正がある場合もCSSより修正範囲を小さくできる。

このようにCSSの弱点を補い、より機能を充実させたものがSassである。

SASSとSCSSは何が違うのか?

Sassには実は2つの記法があり、「SASS記法」と「SCSS記法」がある。

最初はSASS記法だけが使われていたが、通常のCSSの書き方を大きく簡略化して書くため、CSSの書き方と異なって分かりにくく、あまり普及しなかった。

その後、CSSの書き方に似たSCSS記法が作られ、それが広く普及して現在に至る。したがってSassと呼ばれるが、ファイル拡張子は.scssになることが多い。

Sass導入のデメリット

Sassの導入にはよい面ばかりではない。少しデメリットもある。

環境構築が面倒?

Sassを使うには環境構築が必要である。ここでSassの導入をためらう人は多いだろう。

しかし現在は、Visual Studio CodeのEasy SassやLive Sass Compilerという拡張機能を使えば、手軽にSassを利用できるため、環境構築の手間を少し減らせる。

学習コストがかかる?

新しくSassの記法を学ぶ必要があるため、学習コストがかかる。

しかし今Sassを学ぶことで、今後のコーディング効率化を図れると考えれば、学習コストがかかっても学ぶ価値はある。

環境構築が必要だったり学習コストがかかったりするが、それを上回るメリットがあるため、ここで諦めず導入を検討する価値がある。

Sass導入のメリット

Sass導入の大きなメリットを2つ紹介する。

作業効率が高くなる

Sassを導入して最初に感じるメリットは、作業効率が上がることである。CSSに比べてコードの記述量が圧倒的に少なくなるため、コーディングが非常に楽になる。

また、複雑なコードでも一つにまとめておき、後から再利用するときも簡単に呼び出せるため、一度Sassを使うと元のCSSを書く方法に戻りたくなくなる。

保守性の向上

Sassでは、よく使うサイトのメインカラーやサブカラー、サイトのコンテナ幅などを変数として指定しておける。

たとえば後から「メインカラーを赤からオレンジに変更したい」となった場合、変数を1つ変更するだけで関連するCSSをすべて修正できる。

CSSでは関連箇所をすべて修正する必要があるが、Sassで書いておけば後からの変更も楽になるため、保守性が向上する。

Sassの主な機能

Sassには多くの機能があるが、便利だと思われる代表的なものを4つ紹介する。

ネスト構造の記述を簡略化

Sassでは、親子関係にあるセレクタをネスト構造で書くことができる。

CSSでは親要素から対象要素までのセレクタを何度もすべて書く必要があるため、次のように必然的にコード量が増えてしまう。

style.css

section {
  margin-bottom: 100px;
}
section h1 {
  font-size: 24px;
}
section p {
  margin-bottom: 20px;
}
section a {
  color: red;
}
section a:hover {
  opacity: 0.4;
}

Sassではネストを使ってまとめてスタイルを記述できるため、コード量を減らせるだけでなく、親子関係も分かりやすくなる。

style.scss

section {
  margin-bottom: 100px;
  h1 {
    font-size: 24px;
  }
  p {
    margin-bottom: 20px;
  }
  a {
    color: red;
    &:hover {
      opacity: 0.4;
    }
  }
}

もしsectionを.testに変更したい場合は、1行目のsectionを.testに修正するだけでよく、修正工数を大幅に減らせる。

変数を使用できる

Sassでは変数を活用できる。

よく使うサイトのメインカラーやサブカラー、サイトのコンテナ幅などを変数として指定しておくことで、何度も繰り返し書く場所で利用できる。

style.scss

// カラー設定
$main-color: blue;
$sub-color: gray;
$link-color: red;

// 使用例
section {
  background-color: $main-color; // メインカラー
  margin-bottom: 100px;
  h1 {
    font-size: 24px;
    background-color: $sub-color; // サブカラー
  }
  p {
    margin-bottom: 20px;
  }
  a {
    color: $link-color; // リンクカラー
    &:hover {
      opacity: 0.4;
    }
  }
}

CSSにコンパイルすると次のようになり、各色が指定どおり反映されていることが分かる。

style.css

section {
  background-color: blue; 
  margin-bottom: 100px;
}
section h1 {
  font-size: 24px;
  background-color: gray;
}
section p {
  margin-bottom: 20px;
}
section a {
  color: red;
}
section a:hover {
  opacity: 0.4;
}

また、修正があっても変数にしておけば最小限の修正量で作業が終わるため、影響範囲が大きいものは変数にしておくことをおすすめする。

ミックスインを使う

Sassではミックスインを利用できる。

ミックスインは、定義したCSSスタイル、たとえばサイトで使用するボタンデザインなどを、別の場所でも使えるようにする機能である。

たとえば、サイトで使うボタンのスタイルを別ページで使いたいが、そこでは色だけ変えたい場合がある。しかし色が違うだけでも、ボタン自体のレイアウトに関する記述も必要になるため、コード量が増えてしまう。

style.css

.button01 {
  background-color: blue;
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: .25s;
}

.button02 {
  background-color: gray;
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: .25s;
}

ミックスインを使えば、共通スタイルはミックスインとして定義し、それを呼び出して、新たに色のスタイルだけを書けばよい。

style.scss

// ボタンのスタイル設定
@mixin button {
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: .25s;
}

.button01 {
  background-color: $main-color;
  @include button; //@includeでボタンのスタイルを呼び出す。
}

.button01 {
  background-color: $sub-color;
  @include button; //@includeでボタンのスタイルを呼び出す。
}

同じスタイルを複数箇所で使う場合には非常に役立つ機能である。

ファイルを分割して管理しやすい

Sassではファイルを分割し、管理を簡単にできる。

ファイルを次のようにそれぞれのまとまりに分割できる。

  • _header.scss
  • _body.scss
  • _footer.scss
  • _sidebar.scss

すると、ヘッダーを修正する場合は_header.scssを修正すればよいため、該当箇所を見つけやすく管理しやすくなる。

ファイル自体はそれぞれ分割されているが、最終的には1つのスタイルシートにまとめることができる。

ここでは例として分かりやすいように上のようにファイルを分けているが、実際には機能別、レイアウト別、カラー用ファイルなどに分けることが多い。