そんなSass初心者向けの記事になります。

自分も最初はSassってよく分からないから導入しなくて良いやって思ってましたが、Sassを導入した今は元のCSSに戻れなくなるくらい、Sassの有り難みを身にしみて感じています。

そんなSassについて紹介していきます！

Sassとは

Sassとは、ハンプトン・キャトリン氏が設計し、ネイサン・バイゼンバウム氏が開発した「CSSのメタ言語」です。

メタ言語とは「ある言語について何らかの記述をするための言語」で、Sassは「CSSに対し機能を拡張した言語」ということになります。

CSSをより効率的に書けるようにしたものと理解しておけばOKです。

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

CSSとは何が違う？

SassはCSSのメタ言語のため「CSSに対し機能を拡張した言語」です。

通常のCSSでも問題なく作業をすることは出来ますが、その量が膨大になっていくに連れて大変になってきます。また修正があった際に1つひとつ修正する必要があり、手間が掛かってしまいます。

Sassを用いれば、通常の記述を少なくしたり、修正があった際にもCSSよりも修正範囲を少なくすることも可能です。

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

SASSとSCSSとは何が違う？

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

最初は「SASS記法」が用いられていましたが、通常のCSSの書き方を非常に簡略化して書かれており、そのためCSSの書き方と異なり分かりづらいためあまり普及しませんでした。

その後にCSSの書き方に近い「SCSS記法」が作られ、それが広く普及して今に至ります。

そのため、Sassと呼ばれていますが ファイルの拡張子は「.scss」 となっています。

この辺りが少しややこしいので、注意しましょう。

ちなみに「SCSS」は「Sassy CSS」の略で「イカしたCSS」という意味となります。

※なんか「イケてる」とか「イカした」とか多いな…

Sass導入のデメリット

Sass導入にあたって、全てが良い面ばかりではありません。

少しデメリットもあるので、ここで見ていきましょう。

環境構築が面倒

Sassを使用するためには環境構築が必要となります。

ここでSassの導入を躊躇う人も多いのでは無いでしょうか。

ただし、今は「Visual Studio Code」の「Easy Sass」や「Live Sass Compiler」という拡張機能を使うと、手軽にSassを使用することができるようになるため、環境構築の手間が少し省けます。

学習コストがかかる

新たにSassについての記法を学んでいくため、学習コストが掛かってしまいます。

しかしながら、今、Sassを学ぶことで今後のコーディングの効率化が図れると思えば、学習コストが掛かってでも学んだ方が良いと思います。

環境構築が必要だったり学習コストが掛かるけど、それを上回る程のメリットがあるからここで諦めず、導入のメリットを見ていきましょう！

Sass導入のメリット

Sass導入の大きなメリットを2つ、紹介していきます。

作業効率が上がる

Sass導入して真っ先に感じるメリットは作業効率が上がることです。

CSSに比べ、コードの記述量が圧倒的に少なくなるので、コーディングが非常に楽になります。

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

メンテナンス性の向上

Sassではよく使うサイトのメインカラーやサブカラー、サイトのコンテナ幅等を変数にしておくことが出来ます。

そのため、もし、あとから「メインカラーを赤からオレンジに変更したい」となっても変数の1箇所を変更するだけで修正が出来てしまいます。

CSSでは、修正箇所を全て変更しなければならなくなるため、Sassで記述することはそういったあとからの修正にも強くメンテナンス性が向上します。

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

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

ミックスイン(mixin)が利用できる

Sassは、ミックスイン(mixin)を利用することができます。

ミックスイン(mixin)は、定義した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;
  /* ↑ここは一緒↑ */
}

ミックスイン(mixin)を用いれば、スタイルの箇所はミックスイン(mixin)で定義したスタイルを呼び出し、新たに色のスタイルを記述する。だけで済むようになります。

そのため、以下のように記述しても先程のCSSと同じ結果となります。

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つのスタイルシートにまとめることができます。

最後に

いかがだったでしょうか？
今回、Sassについて非常に便利だと感じていただけたかと思います。

一度、Sassを使うと元のCSSベタ書きには戻れないほど、Sassの魅力にハマっていきます。

コーディングで作業効率が爆上がりになりますので、是非、この機会に導入してみてください。

Discussion