Sass の高度な構文

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

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

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

以下に示すように:

1 外部ファイルをインポートします。デフォルトのファイルサフィックスはデフォルトでは sass/scss ファイルで、通常はヘッダーで宣言されます

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

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

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

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

2 extend 関数は、クラス名セレクターのスタイルを継承するだけでなく、その親セレクターの継承を含め、それに関連するスタイルも継承します

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

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

3 extend 関数は、単一要素セレクターのスタイルを継承し、その親セレクターの継承を含め、それに関連するスタイルを継承します

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

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

4 拡張中チェーン拡張

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

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

5 プレースホルダー % と % は CSS にコンパイルされません

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

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

6 extend で存在しないスタイルを継承する際のエラーを防ぐには、!optional を使用して空のスタイルを直接スキップします

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

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

7 @at-root ディレクティブにより、1 つ以上のルールが親セレクターの下にネストされるのではなく、ドキュメントのルート レベルで出力されます

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

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

8 @at-root(without:class name) はセレクターをネストされたディレクティブの外に移動します

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

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

9 条件判定の場合、if...else...

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

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

10 for ループステートメント

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

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

11 内の各ループ ステートメント @each $var

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

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

12 while ループステートメント

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

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

13 コードブロックの再利用を実現するための命令の混合

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

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

14 コンテンツブロック @content をミックスインに渡し、 @content の位置に渡します

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

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

15 変数は @mixin のスコープ内で混合されます。つまり、ミックスインに渡されるコンテンツ ブロックは、ミックスインのスコープではなく、定義されているスコープ内で操作されます。これは、ミックスインのローカル変数をスタイル ブロックに渡して使用することができないことを意味します

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

编译成test.css内容是:

<span style="color: #000000;">.test12 {
  background</span>-<span style="color: #000000;">color: black;
  color: white;
}</span>

16 函数,用法类似@mixin

test.scss内容是:

<span style="color: #000000;">@function sasa($name) {
    @</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> $name;
}
.test13 {
    font</span>-<span style="color: #000000;">size: sasa(15px);
}</span>

编译成test.css内容是:

<span style="color: #000000;">.test13 {
  font</span>-<span style="color: #000000;">size: 15px;
}</span>