Sass初級文法

使用される 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 継承 (SASS では、あるセレクターが別のセレクターを継承できます)

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

リーリー

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

リーリー

6 コードブロックを再利用する

test.scss の内容は次のとおりです: (変数なし)

リーリー

test.css にコンパイルされた内容は次のとおりです: (変数なし)

リーリー

このメソッドの非常に便利な点は、次のように変数を設定できることです:

test.scssの内容は次のとおりです: (変数付き)

リーリー

test.cssにコンパイルされた内容は次のとおりです: (変数付き)

リーリー

7つの機能

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

リーリー

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

リーリー

8 外部 scss または css ファイルをインポートします

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

リーリー

more.scss コンテンツは次のとおりです:

リーリー

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

リーリー