- 現代の主流はCSSでコーディングするのではなくて、Sass（SCSS）が主流って聞くけど本当？
- Sassとはなに？Scssを使うとどのようなメリットがあるのか、使い方や導入方法など基礎的な情報を教えて欲しい！
今回の記事では、今話題のフロントエンジニアは必ず使うSass（SCSS）に付いて基礎知識を網羅して初心者の方に解説します。
このSassの基礎知識が理解できるようになり、実際に使いこなせるようになると、、、
- デザインのコーディング速度が格段に早くなる
- CSSの修正が容易になる
- 実務で通用する技術を使えるようになる
- CSSのファイル管理が綺麗にできる
このようなメリットが得れます！
実際に実務の現場でWebサイトを作る際はCSSではなくて、Sassを使ってコーディングすることがほとんどです！
✔︎こんな方にオススメ
- Sassはいいよ〜！とか聞くけど何か知らない方
- CSSのコーディングが遅い方
- 爆速でCSSを書きたい方
- Sassの導入〜使い方を知りたい方
Sass（Scss）とはそもそもなに？
Sass（サス）とは、超簡単に言うと、、、
「CSSをより効率的に書ける言語です！」
つまりSassとCSSは密接な関係があることをまずは覚えておいてください！
Sass＝Syntactically Awesome StyleSheet を略した言葉で、
- Syntactically ＝ 構文的に
- Awesome ＝ 驚くべき
- StyleSheet ＝ スタイルシート
と言う意味になり、具体的に言うと「変数や関数（構文的に）を使うことによって、驚くくらいに早くスタイルシートを作ることができる！」と言う解釈でいいでしょう！
つまりイメージ的には、CSSでは10分かかったスタイリングがSassを使うことにより3分でスタイリングできてしまうと言うことです！
Sassは数学で例えると「掛け算」
例えば２つの数式があったとして、、、
- 2+2+2+2+2+2+2+2+2+2+2+2+2+2+2=30
- 2×15=30
これのどちらが計算しやすいですか？と聞かれた時、圧倒的に後者の「2×15」ですよね！
CSSとSassを比較するとこのようになります。
このように、スタイリングの実行結果は同じでも、SassとCSSでの記述法は違うことが分かります。
つまり、Sassは先程の足し算と掛け算の比較のように、
- 記述が少ない
- コードが見やすい
大きくこの２つのメリットがあると言えます！
Sassを使えば、早くスタイリングできることはよく分かったよ！
SassとScssの違い
タイトルにも書いてあるように、SassはScssとも呼ばれたりしています。
SassとScssはスタイリング処理は同じだけど、書き方が少し違います。
Scss
.nav{
margin:10px
a{
color:#12cacc;
padding:10px 20px;
}
}Sass
.nav
margin:10px
a
color:#12cacc;
padding:10px 20px;
}このような少しの違いですが、ScssはCSSの名残を受けていて、SassはRubyの記述法に似ています。
ただ、どちらも実行結果は同じになるので、書きやすい方でコーディングするといいでしょう。
✔︎拡張子には気をつけよう！
- Sassを書く場合：.sass
- Scssを書く場合：.scss
Sassを使うメリット
先ほどは、Sassを使うと、「記述が少なく、コードが見やすくスタイリングできる」ことをご紹介しましたが、他にもSassを使うメリットはあるので、具体的にどのようなことができるかご紹介します。
✔︎Sassで出来る事・メリット
- 文字サイズ、色コードを変数で指定できる
- 入れ子でセレクタを管理できる
- 擬似要素の書き方が簡単
- メディアクエリの指定が楽
このようにCSSをコーディングする際に、多くの方がストレスを抱える部分をほぼほぼSassでカバーすることができます。
文字サイズ、色コードを変数で指定できる
CSS
body{
background:#1353A0;
}
a{
color:#BE3468;
}Scss
$main-color:#1353A0;
$sub-color:#BE3468;
body{
background:$main-color;
}
a{
color:$sub-color;
}$main-color:#1353A0; のように変数で色コードを指定することにより、「あのカラーコードの値なんだっけ？」と迷うこともありませんし、全体のメインカラーを変える際にも、変数の値を変更するだけなのでとても簡単です。
色コード以外にも、フォントサイズや、フォントの指定にも使えまうす。
入れ子でセレクタを管理できる
CSS
.nav{
padding:10px
}
.nav a{
color:#1353A0;
}Scss
.nav{
padding:10px
a{
color:#1353A0;
}
}このように、親要素と子要素を入れ子のようにして、スタイリングすることができます。
このようにすることで、記述を少なくできる事は勿論、同じ要素のスタイリングをひとまとまりにすることができるので、後から編集する際に非常にやりやすいです。
擬似要素の書き方が簡単
CSS
a{
background:#1353A0;
}
a:hover{
background:#135300:
opacity:0.7;
}Scss
a{
background:#1353A0;
&:hover{
background:#135300:
opacity:0.7;
}
}
擬似要素を指定する場合は、入れ子にできる＋＆を使って省略することができます。
これも同様、入れ子にすることで、ひとまとまりにできるので、非常に見やすく編集も簡単です。
メディアクエリの指定が楽
CSS
@media screen and (max-width:1440){
body{
background:red;
}
}
@media screen and (max-width:740px){
body{
background:blue;
}
}
Scss
//ここでpcとspの幅を定義
$pc: 1040px;
$sp: 740px;
//ここでmax-widthを指定
@mixin pc {
@media (max-width: ($pc)) {
@content;
}
}
@mixin sp {
@media (max-width: ($sp)) {
@content;
}
}
//＠includeする事で、上記が適用される
.body {
@include pc {
background-color: red;
};
@include sp {
background-color:blue;
};
}「あれ？Sassの方が記述長いじゃん！」と思うかもしれませんが、はじめにPCとSPの幅を定義しておくことによって、何度も@media screen and (max-width:1440)とかく手間が省けます。
初心者の方は、慣れるまで少し難しいですが、慣れるととっても早くレスポンシブ化することが可能になります。
Sassの使い方
Sassを使うには、CSSのようにファイルを作ってhtmlタグの<head>にパスを通せば使えるわけではなく、Sassを使えるように環境を作る必要があります。
つまり、、、
<link rel="stylesheet" href="/css/style.sass"/>このようにstyle.sassファイルを作って、パスを通しても使うことができません。
SassはCSSにコンパイルする必要がある
SassはCSSをより書きやすくしたものなので、Sassで書いたコードをCSSにコンパイル（変換する）必要があります。
SassをCSSに変換するには、Rubyをインストールしたり、Preprosと呼ばれる変換ツールでコンパイルしたりしますが、僕がオススメする最も簡単にSassからCSSに変換する方法はVSCodeの拡張機能を使う方法です。
VSCodeの「Live Sass Compiler」と言う拡張機能をインストールするだけで、Sassをコーディングすれば自動で同じCSSファイルを生成してくれるとっても便利な機能です。
このようにmain.sassを書くと、自動的にmain.cssが生成されるので、、、
<link rel="stylesheet" href="/css/main.css"/>このようにmain.cssのパスをhtmlファイルに通せば、Sassで記述したスタイリングが適用されます！
→VSCodeでSassのコンパイル環境（CSSに変換）を一瞬で構築する方法
Sassとは？使い方・メリット まとめ
いかがでしたでしょうか！
Sassは他のプログラミング言語習得みたいに、３ヶ月ほどの学習期間は必要なく、書き方さえ覚えれば1日たらずで習得できるので、ぜひSassを使いこなせるようにしましょう！
実際の実務の現場でもCSSで１からコーディングするのではなく、Sassを使うことがほとんどです！
最後までご覧いただきありがとうございました！
