Sassという言葉は聞いたことはあるけど、
言葉しか知らないから教えてほしい。
今回は、Sassとは何かについて説明しますよ。
実際に業務で使いたいからSassの使い方も
教えて欲しいです。
それでは、Sassとは何か説明した後に
実際に使う手順を解説していきます。
こんにちは、たつき(@tatsuuu_227)です。
今回は上の会話にあるように『Sass』についてわからない方に向けて
Sassとは何かわかりやすく解説して、実務で使えるよう使用手順を簡単に解説していきます。
このページを読み終わる頃には『Sass』が使えているように紹介していきます。
Sassとは？
SassはCSSのプリプロセッサーです。
プリプロセッサー ＝ プリ（前もって）＋プロセッサー（処理する）
SassはCSSを前もって処理するCSSメタ言語のことをいいます
そしてこの『Sass』は
『SASS』と『SCSS』の2種類があります。
今回は初心者に向けて簡単に紹介するので、現在は『SCSS』が主流であると覚えておきましょう。
それでは、SCSSの使い方を簡単に解説していきます。
SCSS使う準備
SCSSをエディター（今回はVS code）で使用する方法を紹介します
ファイルを作る
まずはSassを使う時はCSSファイルの他に『style.scss』を作成しましょう。
今ファイルが
『index.html』『style.css』『style.scss』
がある状態です。
このまま scss ファイルにSassを記述していってもスタイルが適用されません。
SassをCSSに変換しなければいけません。
拡張機能を準備する
『scssファイル』を変換（コンパイル）しなければいけないので、準備をしていきます。
ここでVS codeの拡張機能を使って簡単にコンパイルができます。
VS codeの左側にある下のテトリスのようなロゴをクリックします。
そしたら、検索バーで『Live Sass Compiler』検索します。
緑色の『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{ })
コンパイル方法
ページ下部のWatch Sassをクリックする事で、自動でコンパイルしてくれます。
Watchingになっていれば自動でしてくれます。
ここで、『style.css.map』というファイルが自動で作成されます。
この役割は、ディベロッパーツールで要素をみた時にSCSSの該当する記述が何行目にあるかを
示してくれます。
CSSとSCSSの行を対応付けて表示してくれます。
このファイルを削除してしまうと、より膨大な量になった時に探す事が用意ではなくなるので
必ず削除せず、かつCSSと同じディレクトリ内に作りましょう。
まとめ
今回はまだ知らない方向けに簡単にSassを使う方法を解説しました。
Sassにはまだまだ便利な機能があるので、次回紹介していきます。
Sassを使いこなせるようになれば、
効率的にスタイリングができるようになるのでコーディングの速度が
飛躍的にアップします。
Sassを習得して効率的にコーディングをしましょう！