SCSS記法とは？用語の解説と使い方をわかりやすく解説

• CSSは聞いたことあるけどSCSSは初めて聞いたな？なんのことだろう
• SCSS記法が最近推奨されてるけどどんな特徴があるんだろう？
• Sass、sass、scss、なんかややこしくてよくわからない！！

今回はこういった疑問について解説していきます。各用語の意味はこちらです。

これらの詳しい解説をしていきます。

Sassとは何？用語の解説

Sass(サス、サース)とはCSS言語のメタ言語(拡張言語)のことを指します。従来のCSSを拡張してよりわかりやすく簡単に扱えるようにしたスタイルシートのことです。SassはSyntactically Awesome StyleSheetの略で直訳すると「構文的に素晴らしいスタイルシート」と言います。そのままですね。

CSSは入れ子構造や関数といった変数を定義できない点で記述が煩雑な側面がありました。このSass記法を使うことでそうしたものが実現でき、より高速で記述が可能になりました。Sassには主に2つの書き方が存在します。後ほどそれぞれの解説をします。

Sassの代表的な特徴は大きく5つあります。

1. 入れ子の使用が可能
2. 変数を利用できる
3. 四則演算が可能
4. 関数を使用できる
5. ミックスイン・継承による効率化

入れ子の使用が可能

入れ子とは、同じ親要素の異なる子要素をそれぞれスタイルする時に親要素の中に記述することで、毎回親要素を指定しなくていいということです。図で表すとこのようになります。

▼HTML
————————————————
<div class="content">
<img src="#" class="content__img">
<p class="content__text">テキストが入ります。</p>
</div>
————————————————

▼CSS
————————————————
// CSSで書いた場合
.content{
width: 200px;
height: 200px;
}
.content .img{
width: 100%;
padding: 10px;
}
.content .text{
font-size: 16px;
line-height: 1;
font-weight: normal;
}

// Sass（scss）で書いた場合
.content{
width: 200px;
height: 200px;
&__img{
width: 100%;
padding: 10px;
}
&__text{
font-size: 16px;
line-height: 1;
font-weight: normal;
}
}
————————————————

変数を利用できる

変数をSassのファイルに定義することでその変数を何度も使うことが可能です。フォントサイズや、背景色の色、コンテンツの幅や、marginなどの共通する箇所を変数にすることで効率的に記述かできます。また共通パーツを変更したいときも変数を変えることで全ての箇所が変わります。そのためメンテナンスも楽に行えます。

四則演算が可能

値を計算してそれを返すことができるのでスタイルをうまく調節した記述が可能になります。

関数を使用できる

Sassではkeyframeといった特定の関数を設けて汎用性のある実装を実現することができます。引数を利用することで値を生成してそれを応用した仕組みを作れます。最初は慣れないですが、使っていくうちに使える幅が広がりとても便利な機能に感じてきます。

ミックスインの使用

ミックスインとはよく使う関数や値を定めたものをまとめる役割をし、それをインポートしておけば毎回関数を書かなくても、別の場所でも実装ができるようになる機能のことです。Webデザインをする上で統一したデザインを使用する場合はミックスインを使うことで効率良く作業ができます。

sassとは何？用語の解説

Sassのうち1つ目の記法はsass記法です。Sassとsassで混同しがちですが、sassは記法の種類を指します。書き方としては記述の際に{}や；を使わないで記述します。

簡略化して書けることが特徴的です。先ほどのコードを例にとると

————————————————
// CSSで書いた場合
.content{
width: 200px;
height: 200px;
}
.content .img{
width: 100%;
padding: 10px;
}
.content .text{
font-size: 16px;
line-height: 1;
font-weight: normal;
}

// sassで書いた場合
.content
width: 200px
height: 200px
__img
width: 100%
padding: 10px
__text
font-size: 16px
line-height: 1
font-weight: normal
————————————————
このような記述ができます。{}や；を書かずに記述ができるため楽にコードを書けます。Sassの機能も使えるため入れ子や変数なども作ることができます。ファイルの拡張子は.sassです。

scssとは何？用語の解説

ScssはSass記法のもう一つの記述方法です。先ほど例に挙げた通り、親要素の中に子要素を並べることで記述が可能です。入れ子の記載をする時は一つ上の親要素を「＆」として定義できるのでその次に子要素を記述することでスタイルを描くことができます。

Scss記法は{}や；を省略できないようになっています。CSSの書き方にとても近いためscss記法が一般的にはよく使われています。拡張子は.scssです。

Sass記法のメリットデメリットを解説

ここでSass記法のメリットとデメリットを解説します。

Sass記法のメリット

• コードを簡略化できるので可読性が増す。
• 修正時のメンテナンスが非常に楽になる。
• ミックスインなどの機能を使うことで効率良く記述ができる。

Sassのメリットはやはりコードを簡略化できることにあります。1つの親要素に対して複数の子要素や孫要素がある時にとても便利です。また親要素が違ったとしても一定の法則で子要素のクラス名を作っていればその子要素のスタイルを他でも使いたい時に使い回しが効きます。

例）
HTML
————————————————
<div class="main">
<img src="#" class="main__img">
<p class="main__text">テキストが入ります。</p>
</div>
<div class="content">
<img src="#" class="content__img">
<p class="content__text">テキストが入ります。</p>
</div>
————————————————

CSS
————————————————
.content{
width: 200px;
height: 200px;
&__img{
width: 100%;
padding: 10px;
}
&__text{
font-size: 16px;
line-height: 1;
font-weight: normal;
}
}
.main{
width: 200px;
height: 200px;
&__img{
width: 100%;
padding: 10px;
}
&__text{
font-size: 16px;
line-height: 1;
font-weight: normal;
}
}
————————————————

この場合contentクラスのスタイルとmainクラスのスタイルは同じです。そうなると、親要素のクラス名だけ変更すれば子要素の箇所はそのままコピペで複製可能です。
修正が必要なときも、塊で記述しているので修正箇所を抑えてできます。メンテナンスがとてもしやすいです。
関数や変数も利用できるので頻繁に使うスタイルはまとめておいてミックスインなどで保管しておけば別の場所でも流用できます。

Sass記法のデメリット

• 学習コストがかかる
• 環境構築に時間がかかる
• うまく設定できないと初期段階で手間取る
• HTMLのクラス名を振るところから計画的にコーディングが必要

Sass記法のデメリットとして大きいのは最初に学習する人にとって学習コストがかかるということです。CSSの勉強がある程度終わっている人にとってはそこまで大変ではないかもしれませんが、初学者がいきなりSassに取り組むと理解するのに多少時間がかかるかもしれません。

しかし、最終的にSassでスタイリングしていくことが望まれるため今から取り組んでいくことをおすすめします。

通常ネット上で動作するのはCSSファイルになります。Sassで書いたファイルは拡張子が.sassまたは.scssのため.cssに変更する必要があります。（専門用語でコンパイルすると言います）VSコードなどのエディターでは自動でSassファイルをcssファイルにコンパイルしてくれる拡張機能などがあるのでそこまで問題ではないかもしれませんが、開発環境によってはコンパイルする準備に時間がかかることもあります。

後々変換できなかった！とならないように最初にコンパイルできる環境を整えることが必要になります。

まとめ

今回はSassについて解説してきました。HTML/CSSはwebページを表示するための基礎のものになりますがそれを手助けするための拡張言語のSassをマスターすることでより効率的に開発ができます。ぜひこの機会にSass記法にチャレンジしてweb制作に取り組んでみてください。

今回は以上です。ありがとうございました。