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 ループ (偽になるまで出力を繰り返します。ループ値はカスタマイズできます)
ここで、カスタム サイクルの値はスペースで区切る必要があることに注意してください。