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

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 サイトの他の関連記事を参照してください。