Tech Labo F

今回は、SCSSの入れ子コーディングのやり方についてになります。
実際に手を動かして進めてみましょう。

1. 事前準備

まずは、必要ないものを準備していきます。

必要なものは、以下の通りになります。

・エディター（Visual Stadio Codeがオススメです）

・Live Server（エディタのプラグインです。これは入れるのは任意ですが、オススメです）

・Live Sass Compiler（scss→cssにするコンパイラーです。これは必須）

・適当なHTMLファイル（お好みでOK）

2. 実践

では、実際に進めていきます。

まずは、今回の適用させるページはコチラ

HTMLの内容はコチラ

では、まずSCSSファイルを作成します

1. サンプルとして作成したSCSS-practiceのディレクトリを選択し、右クリック
2. 新しいファイルを作成を選択

これでファイルの作成が完了です！

続いて、style.scssに下記のように記述していく

1. まず、headerクラスの作成をする
2. ここで親要素であるheader部分のスタイルを記入
3. その後、通常のcssであればここで「}」を使用し、閉じるのですが、
   ここに、次の子要素であるnavクラスを作成し、スタイルを記述していく
4. 同様に必要なクラスを中に入れ込みつつ、作成していく
5. そして、最後は漏れがないように「}」で閉じていく
6. 漏れがなければ、これで記述が完了です

その後、エディタの下にあるwatch sassを押します

すると、scssファイルを自動的にcssファイルに変換してくれます。

あと、style.css、style.css.mapのファイルが自動的に作成されます。

では、実際に見てみましょう。

cssも問題なく適用されていますね！

以上が基本的な作成方法となります。

明らかに、cssの記述方法が楽になってますね！

入れ子での記述は通常のcssのように、クラスを一つずつ作成しなくて良いのは便利なのです。

入れ子以外の細かい記述方法は次回以降に記述したいと思いますが、

ぜひ、何度も練習してみてください。

今回のまとめ