注：Lessの簡単な使用（cssプリプロセッサー）

Lessには、一連のカスタム文法とパーサーが含まれています。ユーザーはこれらの文法に基づいて独自のスタイルルールを定義します。これらのルールは最終的にパーサーによってコンパイルおよび生成され、対応するCSSファイルが生成されます。

• 変数

フォーマット

@变量名：值

不能包特殊字符，不能以数字开头，大小写敏感

• 入れ子

フォーマット

父级元素{
    
    
	css样式；
	子集元素{
    
    
		css样式
	}
}

1. 交差|疑似クラス|疑似要素セレクター

内部セレクタの前にアンパサンドがない場合は、親の子として解析されます。
アンパサンドがある場合は、親要素自体または親要素の疑似クラスとして解析されます

父级元素{
    
    
	css代码；
	&：hover{
    
    
		css代码
	}
}

• 計算

Lessの任意の数、色、変数は計算に参加できます

1. 演算子の左側と右側にスペースを追加する必要があります
2. 2つの数値が計算に参加し、1つだけに単位がある場合、最終結果はこの単位に基づきます
3. 両方の数値に単位があり、同じでない場合、最終結果は最初の単位に基づきます

距离运算

元素名称{
    
    
	width：200px + 50；
	height：82rem / @变量名
}

颜色运算

#666 - #444 结果是 #222

• 混合

元素名称a{
    
    
	css代码
}

元素名称b{
    
    
	元素名称a（）
}

元素名称b 里面也有元素名称a 的属性