これからSassを覚えたいという方向けに、最初はこれを抑えとけばOKというポイント4つををまとめました。
「Sassは便利と聞くけど、なかなか覚えるきっかけがない…」という方の参考になれば幸いです！
Sassとは
Sassは 「Syntactically（文法的に） Awesome（イケてる） StyleSheet」 の略だそうです。CSSのもっとイケてるバージョンということですね。
なんとなくCSSとSassは別物というイメージがあったのですが、実際に書いてみると基本的な書き方はCSSと全く同じです。ざっくりとした違いは、Sassのほうがよりシンプルに書けるということと、変数定義や演算などのプログラミングチックなことができるということです。
SassはSCSSファイルに書く
Sassは拡張子が .scss のファイル（SCSSファイル）に書きます。
CSSファイルとSCSSファイルには互換性があるため、今あるCSSファイルの拡張子を.cssから.scssに変えるだけでSCSSファイルになり、そのままSassを書くことができます。
なぜ SassなのにSASSファイルではなくSCSSファイルなのか？と思う方もいると思いますが、実は最初にSASSの記法が作られ、その後にCSSと互換性のあるSCSSが作られたそうです。
なのでSASSという記法も存在しますが、SCSSのほうがCSSと同じ書き方で書きやすいし、CSSと互換性があるしで、SCSSが主流（？）になったということですね。（名前が似ているのでややこしい…）
ちなみにSCSSは 「Sassy（カッコいい） CSS」 の略だそうで、SASSのSとは意味も違うようです。
Sassで最初に覚えるべきこと4選
CSSとSassの違いを4つのポイントに分けて解説します。
1. ネスト
ネストとは、その名の通りクラスをネスト（入れ子構造）で書くことです。イメージとしてはCSSを HTML構造に合わせて書くことができる 機能です。
例えば以下のdivタグにの中にあるh1とaタグにクラスをあてるとします。
<div class="main">
<h1>Sassの書き方</h1>
<a href="example.com">Sassの書き方の詳細はこちら</a>
</div>
CSSであればクラスの数だけ.mainをつけないといけないですが、Sassであれば1つで済みます。
.main h1 {
font-size: 40px;
font-weight: bold;
}
.main a {
font-size: 18px;
font-weight: normal;
}
.main {
h1 {
font-size: 40px;
font-weight: bold;
}
a {
font-size: 18px;
font-weight: normal;
}
}
.main配下のみでクラスを当てたいときなどに便利ですし、あとから管理や変更がしやすいこともメリットです。
また記述が短くてすむので行数がかなり減り、スッキリします。
疑似要素やhoverの書き方
Sassでは擬似要素やhoverなども「&」で繋げてネストすることができます。
.main {
h1 {
font-size: 40px;
font-weight: bold;
// h1に疑似要素をネスト
&::before{
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
background-color: black;
border-radius: 2px;
}
}
a {
font-size: 18px;
font-weight: normal;
// aタグにhoverをネスト
&::hover {
opacity: 0.5;
}
}
}
2. 変数
ページ全体で使う色、数字などを変数化することができます。
「変数」と聞くとなんだか難しそうと思いますが、ただ文字列（例：#000）に文字列（例：$black-color）を指定するだけです。
文字列をなんでも置き換えられるため、例えばボタンの影なども変数化できます。
.main {
h1 {
font-size: 40px;
font-weight: bold;
color: #000;
}
a {
font-size: 18px;
font-weight: normal;
background: #fff;
padding: 4px 16px;
color: #000;
box-shadow: 0 0 15px -5px #ddd;
}
}
// 変数を定義
$white-color: #fff;
$black-color: #000;
$shadow: 0 0 15px -5px #ddd;
$font-size-s: 18px;
$font-size-xl: 40px;
.main {
h1 {
font-size: $font-size-xl;
font-weight: bold;
color: $black-color;
}
a {
font-size: $font-size-s;
font-weight: normal;
background: $white-color;
padding: 4px 16px;
color: $black-color;
box-shadow: $shadow;
}
}
何かを一括変更したいときに、全置換だと意図しない部分まで変えてしまう可能性がありますが、変数を決めておくとそのリスクがありません。
また、最初に変数を定義することで、フォントサイズや色がバラバラになることが予防され、デザインに統一感が出るというメリットもあります。
3. 演算
Sassでは演算ができ、変数と組み合わせることもできます。
- 足し算 +
- 引き算 -
- 掛け算 *
- 割り算 /
// 変数を定義
$content-width: 1200px;
.main{
p {
width: $content-width - 400px;
}
}
変数が変われば演算内容も自動で変わるため、表示崩れを防止することができます。
4. Mixin（ミックスイン）
Mixinで複数のスタイルを1つのセットとして定義することができます。複数回使う見出しや疑似要素などに使えます。
Mixinは@mixinで定義し、@includeで呼び出します。
// 変数を定義
$white-color: #fff;
$black-color: #000;
$shadow: 0 0 15px -5px #ddd;
$font-size-s: 18px;
$font-size-xl: 40px;
.main {
h1 {
font-size: $font-size-xl;
font-weight: bold;
color: $black-color;
}
a {
font-size: $font-size-s;
font-weight: normal;
background: $white-color;
padding: 4px 16px;
color: $black-color;
box-shadow: $shadow;
}
}
// 変数を定義
$white-color: #fff;
$black-color: #000;
$shadow: 0 0 15px -5px #ddd;
$font-size-s: 18px;
$font-size-xl: 40px;
// Mixinを定義
@mixin title {
font-size: $font-size-xl;
font-weight: bold;
color: $black-color;
}
@mixin link {
font-size: $font-size-s;
font-weight: normal;
background: $white-color;
padding: 4px 16px;
color: $black-color;
box-shadow: $shadow;
}
.main {
h1 {
@include title;
}
a {
@include link;
}
}
本来複数行になるところを1行で書けるため、何回も使うものはMixinを作っておけば、全体的にかなりスッキリします。
Sassを書くときの注意点
ネスト機能は便利ですが、深すぎるとCSSになったときかなり長い記述になります。また、Sass上でもネスト構造が複雑になり、逆に分かりにくくなってしまいます。
一般的には2、3階層までがよいと言われているため、それ以上深くなりすぎないようにしましょう。
最後に
「Sassを書くには1から新しい知識を覚えないといけない」と勝手に思い込んでいましたが、実際書いてみると基本は全く同じなので、もっと早くSass書いとけばよかった…！と後悔しました。
拡張子を変えれば今日からでもSassデビューできるので、みなさんもぜひ試してみてください！