Web制作者のためのSassの教科書における勉強記録【ネスト】

CSSは現場ではSass記法で書かれているらしい。

記述量が大幅減するとのことで、CSSいちいち書くのめんどいなーと思っていた私には朗報だった。

いろいろ勉強しているうちに、ネット記事から情報収集していくのって結構大変だと分かった。

本の体系立てて書かれている内容で特有の表現に慣れていないと

不特定多数の人の言葉をうまく自分の中に置き換えられないと思う。

ということで、Sassの本を買った。

第二版が出版されている。最新版を買いたい方は第一版を買わぬよう注意が必要。

この本はきっとわかりやすいんだと思うが、それでも私には結構読み進めるのが大変。

サンプルコードが基本的にCSS・Sassのみなのだ。

元となるHTMLが載っていないので、最終的な表示がどう変わるかのイメージが全然つかめない。

（基礎基本ができていればこのようなことにはならないのかもしれないけど…）

ということで、HTML・Sass・CSSがどう動くかを都度CodePenで確認している。

同じように、この本を手に取ったけどそもそもHTMLがどうなっているのかも見たいんだよねって人のために

Sass・CSSだけでなく、元のHTMLがどう書かれているのかをこの記事に残していこうと思う。

勉強中の身で使用する表現や言葉が不適切な場合がございますのであらかじめご了承ください。

ネストの基本

See the Pen
mdRjQvX by ao___ (@ao___)
on CodePen.

ネストとは入れ子のこと。

ここまではサンプルコードに書いてあるから分かった。

子孫セレクタは"クラス名セレクタ名"のように記述し入れ子になっている以下全体に適用されるセレクタのこと。

それ以外の呼び出す方をするときにどうSassで記述すればよいのか

See the Pen
bGgjQRM by ao___ (@ao___)
on CodePen.

隣接セレクタ（同階層真下にあるセレクタ）を指定するときは＋セレクタ｛～と書き出す
子セレクタ（親セレクタの一段下の階層のセレクタ）を指定するときは＞セレクタ｛～と書き出す

CSSの時に書いていた親となるセレクタの記述をまるっと省略できると理解した

See the Pen
XWpByGm by ao___ (@ao___)
on CodePen.

適用したいセクションの直下に続けてメディアクエリを書ける

0.5倍、0.25倍の時は幅が640px以上あるためsectionの中のアイテムが横並びになる

1倍だとメディアクエリが発動して

   flex-direction:column;

により縦並びになる

ネストはここまで！