1.基礎(chǔ)變量定義(HBuilder)
.div{
background: #aaa;
@size:40px;
.span{
background: #ccc;
font-size: @size;
}
}
2.作為選擇器和屬性名的變量
@kuaidu:width;
.@{kuaidu}{
@{kuaidu}:150px
}
3.字符串
@url:"https://www.baidu.com/img/";
.@{kuaidu}{
@{kuaidu}:1000px;
background:#CCCCCC url("@{url}bdlogo.png");
}
4.重復定義相同變量名覆蓋夷恍。（惰性加載冕碟，就近原則----當前作用域向上搜索）
（二）混合minxins（規(guī)則集）
h1{
font-size: 18px;
color: #ccc;
font-family: "microsoft yahei";
.font-bac;
}
h2{
font-size: 30px;
color: lightcoral;
.font-bac;
}
.font-bac{
background: lightgreen;
}
2.不輸出的樣式集(添加（）)
.font-bac(){
background: lightgreen;
}
3.帶選擇器的混合(&:父級)
.hover{
&:hover{
border: 1px solid #F08080;
}
}
button{
.hover()
}
4.帶參數(shù)混合
.hover(@color){
&:hover{
border: 1px solid @color;
}
}
button{
.hover(@color)
}
5.帶參數(shù)并且有默認值
.hover(@color:#ccc){
&:hover{
border: 1px solid @color;
}
}
button{
.hover()
}
6帶多個參數(shù)的混合(推薦使用耻煤；)
image.png
多個同名集合不會覆蓋扰楼，而是取合集
.hover(@color:#ccc;@pading:20px 30px 20px 40px){
&:hover{
border: 1px solid @color;
padding: @pading;
}
}
button{
.hover()
}
7.命名參數(shù)(根據(jù)名字而不是位置)
@arguments代表所有參數(shù)
.hover(@color:#ccc;@pading:20px 30px 20px 40px){
&:hover{
border: 1px solid @color;
padding: @pading;
}
}
button{
.hover(@pading:40px)
}
8.匹配模式
button{
.hover(@pading:40px);
background: @color;
.border(t-l)
}
.border(all,@kuaidu:5px){
border-radius: @kuaidu;
}
.border(t-l,@kuaidu:5px){
border-top-left-radius: @kuaidu;
}
9.混合中的運算
.average(@x,@y){
@average:((@x+@y)/2);
}
button{
.hover(@pading:40px);
background: @color;
.border(t-l);
.average(30px;60px);
height: @average;
}
