Less と Sass フレームワークを使用するにはどうすればよいですか?

PHP中文网
リリース: 2017-06-21 14:28:56
オリジナル
2154 人が閲覧しました

1. 構文の簡略化

1. 変数宣言:

@変数名: 変数値;

既存のクラスを独自のメンバーとして呼び出す

4.パラメータ:

1 @newHeight:20px;
ログイン後にコピー

5. ネスト: (CSS ではネストは存在できません)

1 .box {2     width: @newHeight;3     height: @newHeight;    
4 }
ログイン後にコピー

1 .box1 {2     .box;3 }
ログイン後にコピー
2. Sass は中括弧を省略します。 CSS 内の {} を表すスコープとステートメントの末尾のセミコロン; 代わりにインデントと改行を使用; ".sass" で終わるファイル;
その構文は {} と; を使用し、変数は次のように宣言されます。 $; 通常は Scss が使用され、「.scss」で終わるファイルが使用されます。

1. 変数の宣言と呼び出し:

1 .newBox(@newWidth) {2     height: @newWidth;3 }4 .box2 {5     .newBox(20px);6 }
ログイン後にコピー

2. 属性のネスト:

1 .box1 {2     height: 200px;3     width: 100px;4     .box2 {5         height: 200px;6         width: 50px;7     }8 }
ログイン後にコピー

3. 混合マクロ:

 1 /*以下两种格式的代码实现的是同一种效果*/ 2 a { 3     &:hover { 4         color: red; 5     } 6 } 7  8 a:hover { 9     color: red;10 }
ログイン後にコピー

4. 継承:

1 /*声明*/2 $newWeight: 30px;3 /*调用*/4 .box {5     width: $newWeight;6 }
ログイン後にコピー

5. プレースホルダー:

 1 /*将box1的border设置为1px solid red的边框*/ 2 .box1 { 3     wiodth: $newWeight; 4     border: { 5         top: 1px solid red; 6         right: 1px solid red; 7         bottom: 1px solid red; 8         left: 1px solid red; 9     }10 }
ログイン後にコピー

プレースホルダーで宣言されたクラスが呼び出されていない場合、コンパイルされた「.css」ファイルにはプレースホルダークラスは存在しません。

以上がLess と Sass フレームワークを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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