Sass初級文法

WBOY
リリース: 2016-08-26 10:13:14
オリジナル
972 人が閲覧しました

使用される 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 にコンパイルされる内容は次のとおりです:

リーリー
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート