Sassとはcssを効率的に記述するために開発された言語です。
SassとScssの2種類が存在しますが今回はScssの紹介をします！

両者の違いは｛｝を使わずインデントを主とするか｛｝を使いネストを主にするかといった記述方法にあります。 cssの記述に慣れているならScssが理解しやすく導入しやすいです。

Sassはその魅力よりも先に導入のハードルの高さや開発環境の構築、学習コストの方が目にいってしまいます。cssで問題なく作業ができているのであればなおさらのことですね。 しかし、活用することができれば生産性が上昇することは間違いありません。
ぜひこの機会にScssの導入メリットに触れていただければと思います。

Scssの特徴

それではScssの大きな特徴とメリットをまとめましたので順にご紹介します。

Scssはいくつかの機能が備わっていますが、どれもコーディングを効率化するのに一役買ってくれる頼もしい機能です。

補足になりますが、文中に出てくるコンパイルとはScssをcssに変換する作業の事です。 Scssのままだとファイルを読み込むことができないのでcssに変換する必要があります。

コンパイルの方法はいくつかありますが、導入方法の際に説明しますので今は「変換が必要なんだ～」程度で大丈夫です。

ネスト（入れ子）

Scssの大きな特徴であるネストを使うことができます。
ネストとはcssを入れ子で記述することができる機能です。

まずは以下の例をご覧ください。

●HTML

<section class="demo">
　<h1>ネストについて</h1>
　<p>入れ子にして記述できます<a href="#">詳しくはこちら</a></p>
</section>

●Scss

.demo{
　　　 background-color: #eeeeee;
　　　h1{
　　　 　font-size:20px;
　　　}
　　　 p{
　　　　font-size:16px;
　　　　 　a{
　　　　　 　text-decoration: none;
　　　　　　 color:#00f;
　　　　　　 &:hover{
　　　　　　　 opacity:0.8;
　　　　　　 ｝
　　　　｝
　　｝
｝

●コンパイルされるcss

.demo{
　background-color: #eeeeee;
｝
.demo h1{
　font-size:20px;
｝
.demo p{
　font-size:16px;
}
.demo p a{
　text-decoration: none;
　color:#00f;
}
.demo p a:hover{
　opacity:0.8;
}

ネストで記述するとコンパイル時に親要素を付けた状態で生成してくれます。

＆は親参照セレクタ　親のセレクタを自動で付与してくれる。a:hoverの部分ですね。

疑似要素や擬似クラスをつける時に使用します。クラスやIDを再度記述する必要がないので便利です。

変数が使える

Scssは変数を使うことができます。

変数とは例えるなら「箱のように中にはいっているものを出し入れできるもの」です。

「#0311FC」の様に色を指定すると思いますが、これだと記述の間違いや変更があった時に一か所ずつ修正が必要になります。そこで、

$blue : #0311FC ;　といった具合に変数化しておくことで、「$blue」と記述することで該当する部分に「 #0311FC」を適用させることができるので記述間違いを減らせますし、 後で変更することがあった場合でも変数の値を変更するだけで全て変更されるので大幅に効率化することが可能です。

プログラミングよりの機能ですが共通して使う値を変数に設定しておくと作業、保守共にかなり便利です。

コードの再利用　@extend　@mixin

コードの再利用ができます。cssだと同じ内容をコピーして使用するなんてことが多かったりしますが@extendや@mixinを使えばぐっと楽になります。

@extend

セレクタにつけたスタイルを継承します。

.button{
　display: block;
　padding:10px;
　border: solid 1px #ccc;
}
.button-2{
　@extend .button;
　background-color: #00f;
}

上記のように記述したコードを再利用することができます。

ボタンの形は一緒だけど色は変えたいといった場合に使えますね。ちなみに後から記述したほうが優先されるのでpadding: 20px;とすれば一部だけ変更することも可能です。

@mixin

名前をつけて管理できます。個人的にはこっちの方が使用することが多いです。

@mixin button{
display: block;
padding:10px;
border: solid 1px #ccc;
｝
.button-2{
@include button;
background-color: #00f;
｝

@mixinの方が使用することが多い理由ですが、まとめて管理しておき必要に応じて呼び出すことができるのでコードが見やすい＆管理しやすいからです。好みもありますし必要に応じて活用すると良いですね。

ファイルの分割

コードではなくファイルについての機能です。

これも非常に便利で特にサイトの規模が大きくなってくるとたくさんのコードを書きますよね？その時にcssを分割することがあると思いますが管理が大変だったり、読み込むcssが多くなってきたり…なんてことがあります。

Scssだと共通部分を別ファイルに分けて管理し読み込むことができます。

header.scss　：　ヘッダーのスタイル

footer.scss　：　フッターのスタイル

common.scss　：　共通するスタイル

mixin.scss　：　@mixinの管理

このように共通する部分はパーツ可しておきます。そして

@import ./header.scss
section{
　 background-color: blue;
｝
@import ./footer.scss

上記のように、共通するヘッダーとフッターのスタイルを読み込むことができます。

コンテンツページは別のcssにするけどヘッダーやフッターなどは共通している時にcssだとヘッダーとフッターの内容をコピーして新しいcssファイルに記述しますが、Scssだとパーツ化したファイルを読み込むだけです。

さらに、ヘッダーで使用変更があった場合もheddar.scssだけ編集してしまえば他の読み込んでいる部分も全て変更することができます。 わざわざファイル毎に編集する必要がないのは非常に便利です。

まとめ

Scssのメリットや特徴は伝わりましたでしょうか？

私自身も元々はcssで作業していましたが転職を期にScssを使うようになりました。

最初は少しとっつきにくいイメージもありましたが、すぐに慣れて今では個人的な制作にも活用しています。クライアントによっては途中で変更を依頼されたりするので修正がとても楽になりました。

昔とは違い昨今では導入する方が増えてきているので、丁寧に説明してくださっているサイトや書籍をよく目にします。

ハードルが下がりつつあるのでこれを機会に導入を考えてみてはいかがでしょうか？