scss

nth-child 親要素内のすべての子要素に対して適用され、その中から条件に一致する要素が選択される。 そのため要素の種類に関係なく、すべての子要素が考慮される。 nth-of-type 親要素内の特定の要素タイプ（タグ名）に対して適用され、その中から条件に一致する要素が選択される。 そのため要素の種類に基づいて選択がされる。 具体例 例えば以下のコードがあった時、 <div class="example"> <div>Item 1</div> <p>Item 2</p> <div>Item 3</div> <p>Item 4</p> <div>Item 5</div> </div> nth-child .example div:nth-child(3) { color: red; } この場合、.example内の直下のdiv要素の中から、3番目の要素（“Item 3”）が赤くなる。 nth-of-type .example div:nth-of-type(3) { color: blue; } この場合、.example内の直下のdiv要素の中から、同じ種類の要素の中で3番目の要素（“Item 5”）が青くなる。

package.jsonのひな型を作成する npm init 色々効かれるが基本的にEnterを押しておけば問題ない。 押し続けているとpackage.jsonが作成されている。 sassをインストール npm i -D sass 上記コマンドでsassをインストールする。 今回は下記バージョンがインストールされた。 "sass": "^1.58.0" Gitでソースコードを管理している場合は、.gitignoreファイルを作成しnode_modules/と記入するのが吉。 Scriptを登録する ちなみに今回は /assets/scss/style.scss ↓ /assets/css/style.css のように変換したい。 先ほど作成したpackage.jsonにScriptを登録する。 "scripts": { "watch:sass": "sass --no-source-map --watch assets/scss/:assets/css/" }, 登録後、Scriptを実行する。 $ npm run watch:sass > media-nove@1.0.0 watch:sass > sass --no-source-map --watch assets/scss/:assets/css/ Compiled assets\scss\style.scss to assets\css\style.css. Sass is watching for changes. Press Ctrl-C to stop. 以降、scssを変更するたびに、コンパイルされる。 たぶん、拡張機能のコンパイルと展開のされ方が違うので、実際にページを見て崩れがないかを確認したほうがいい。 拡張機能について 拡張機能は便利だけど、開発環境の共有ができないので、依存しすぎるのは良くないなあ、と思い直した。