Sass中級文法

githubアドレス: https://github.com/lily1010/sass/tree/master/course02

使用される Sass 構文は次のとおりです:

sass --watch test.scss:test.css --style Compact --style Expanded

以下に示すように:

1 クラス名のネスト

test.scss の内容は次のとおりです:

リーリー

test.css にコンパイルされる内容は次のとおりです:

リーリー

2 属性のネスト

test.scss の内容は次のとおりです:

リーリー

test.css にコンパイルされる内容は次のとおりです:

リーリー

3 親セレクターを参照し、親セレクターを正確に配置し、それを反転して親セレクターになります

test.scss の内容は次のとおりです:

リーリー

test.css にコンパイルされる内容は次のとおりです:

リーリー

4 グローバル変数

test.scss の内容は次のとおりです:

リーリー

test.css にコンパイルされる内容は次のとおりです:

リーリー

5 引用符で囲まれた文字列は、引用符で囲まれていない文字列にコンパイルされます

test.scss の内容は次のとおりです:

リーリー

test.css にコンパイルされる内容は次のとおりです:

リーリー

6 割り算について学びましょう

test.scss の内容は次のとおりです:

リーリー

test.css にコンパイルされる内容は次のとおりです:

リーリー

7色操作

test.scss の内容は次のとおりです:

リーリー

test.css にコンパイルされる内容は次のとおりです:

リーリー

8 文字列操作

test.scss の内容は次のとおりです:

リーリー

test.css にコンパイルされる内容は次のとおりです:

リーリー

9 かっこは優先度を上げます

test.scss の内容は次のとおりです:

リーリー

test.css にコンパイルされる内容は次のとおりです:

リーリー

10 デフォルト変数 !default

test.scss の内容は次のとおりです:

リーリー

test.css にコンパイルされる内容は次のとおりです:

リーリー