Sassを素早く学ぶ方法

1. 複数の参照用の変数を定義する

 ページを生成する

 2.色の透明度

        16 進数表記だけがわかっていて、同時に透明度を設定している場合、Sass は自動的にそれを合法的な形式に変換できます。

=》

 3. 文法的な入れ子 (これはより一般的に使用されます)

        Sass を使用すると、コードの構造と、次の図を使用してそれを表現する方法が非常に明確になります。

1. これは HTML ページの入れ子関係です

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<span></span>
			<div class="app2">
				<a href="#" class="a"></a>
			</div>
		</div>
	</body>
</html>

 2. Sass ページは次のようにネストされます

#app{
	span{
		background-color: black;
	}
	.app2{
		.a{
			height: 20px;
		}
	}
}

 3. これは変換された CSS ページのコードです

#app span {
  background-color: black; }

#app .app2 .a {
  height: 20px; }

4、さまざまな簡単なCSS記述スキル

1. 疑似クラスを参照する場合、コードの重複を避けるために、& 記号を使用して現在の要素 (親要素とも呼ばれます) を置き換えることができます。

に変換

 2. !global ローカル変数がグローバル変数になる

        に変換

 3. extend = "継承

        名前のとおり、親要素の任意の要素を継承したい場合は、extendを使用して実装できます(ただし、現在の開発では、この属性は完全にクラス要素を使用して実装できると思います)

4. If-else 条件文 (私たちが学んだ他の言語と同様に、使用する前に @ 記号を追加するだけですが、現時点では役に立たないように感じます)

=》

4. for ループ (through は含めるという意味、to は含めないという意味) 

=》

 

 =》

 5. while ループ (偽になるまで出力を繰り返します。ループ値はカスタマイズできます)

   ここで、カスタム サイクルの値はスペースで区切る必要があることに注意してください。

 

 

 

 

おすすめ

転載: blog.csdn.net/qq_59274685/article/details/126086020