Less と Sass フレームワークを使用するにはどうすればよいですか?-H5 チュートリアル-php.cn

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 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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