![わからない君](https://tatsuuublog.com/wp-content/uploads/2020/08/question_head_boy-2.png)
Sassという言葉は聞いたことはあるけど、
言葉しか知らないから教えてほしい。
![教える先生](https://tatsuuublog.com/wp-content/uploads/2020/08/school_teacher_tablet_man.png)
今回は、Sassとは何かについて説明しますよ。
![わからない君](https://tatsuuublog.com/wp-content/uploads/2020/08/question_head_boy-2.png)
実際に業務で使いたいからSassの使い方も
教えて欲しいです。
![教える先生](https://tatsuuublog.com/wp-content/uploads/2020/08/school_teacher_tablet_man.png)
それでは、Sassとは何か説明した後に
実際に使う手順を解説していきます。
こんにちは、たつき(@tatsuuu_227)です。
今回は上の会話にあるように『Sass』についてわからない方に向けて
Sassとは何かわかりやすく解説して、実務で使えるよう使用手順を簡単に解説していきます。
このページを読み終わる頃には『Sass』が使えているように紹介していきます。
Sassとは?
SassはCSSのプリプロセッサーです。
プリプロセッサー = プリ(前もって)+プロセッサー(処理する)
SassはCSSを前もって処理するCSSメタ言語のことをいいます
そしてこの『Sass』は
『SASS』と『SCSS』の2種類があります。
今回は初心者に向けて簡単に紹介するので、現在は『SCSS』が主流であると覚えておきましょう。
それでは、SCSSの使い方を簡単に解説していきます。
![](https://www16.a8.net/0.gif?a8mat=3BK37P+5URGXE+CO4+669JL)
SCSS使う準備
SCSSをエディター(今回はVS code)で使用する方法を紹介します
ファイルを作る
まずはSassを使う時はCSSファイルの他に『style.scss』を作成しましょう。
今ファイルが
『index.html』『style.css』『style.scss』
がある状態です。
このまま scss ファイルにSassを記述していってもスタイルが適用されません。
SassをCSSに変換しなければいけません。
拡張機能を準備する
『scssファイル』を変換(コンパイル)しなければいけないので、準備をしていきます。
ここでVS codeの拡張機能を使って簡単にコンパイルができます。
![](https://tatsuuublog.com/wp-content/uploads/2020/08/42158d495813d0582afe29ae7d45dceb-1.png)
VS codeの左側にある下のテトリスのようなロゴをクリックします。
そしたら、検索バーで『Live Sass Compiler』検索します。
![](https://tatsuuublog.com/wp-content/uploads/2020/08/b510876892ffd8c07dfeb3b37b84c03f-1024x753.png)
緑色の『Install』をクリックして『uninstall』になったら完了です。
次は実際にSassを使っていきましょう。
Sass使い方
今ファイルには上で作った3つのファイルがあると思います。
htmlファイルに
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Sassの練習</h1>
<div class="container-text">
<p>テキスト</p>
</div>
</div>
</body>
</html>
こんな感じでテスト文を入力します。
ネスト
Sassの必須スキルがこのネスト(階層構造)です。
実際にみていきましょう
それぞれのh1,h2,pのスタイルを変えたい時CSSだと
.container h1{
color: red;
}
.container-content h2{
color: blue;
}
.container-content p{
color: green;
}
このように書かなければいけませんでした。
しかし同じようなスタイルをしたい時にSassの場合は、
.container{
h1{
color: red;
}
&-content{
h2{
color: blue;
}
p{
color: green;
}
}
}
このようになります。
いまは短い文なのでSassの方が大変そうに思ますがよりコーディング規模が大きくなればなるほど
便利さがわかります。
簡単に説明すると、
親要素の(container)の中に子要素(h1)をそのままかける
そして同じクラス名を使っているとは『&』を使うことで表せます。
これは『hover』のスタイルを記述する時に役立ちます。(&:hover{ })
![](https://www11.a8.net/0.gif?a8mat=3BK9GK+11IBW2+3250+6PC9T)
コンパイル方法
![](https://tatsuuublog.com/wp-content/uploads/2020/08/85424a08e5dd6df438d2c6d454973ea5-1024x584.png)
ページ下部のWatch Sassをクリックする事で、自動でコンパイルしてくれます。
Watchingになっていれば自動でしてくれます。
ここで、『style.css.map』というファイルが自動で作成されます。
この役割は、ディベロッパーツールで要素をみた時にSCSSの該当する記述が何行目にあるかを
示してくれます。
CSSとSCSSの行を対応付けて表示してくれます。
このファイルを削除してしまうと、より膨大な量になった時に探す事が用意ではなくなるので
必ず削除せず、かつCSSと同じディレクトリ内に作りましょう。
まとめ
今回はまだ知らない方向けに簡単にSassを使う方法を解説しました。
Sassにはまだまだ便利な機能があるので、次回紹介していきます。
Sassを使いこなせるようになれば、
効率的にスタイリングができるようになるのでコーディングの速度が
飛躍的にアップします。
Sassを習得して効率的にコーディングをしましょう!