less基本使用
- less可以定義一些常量, 可以讓css處理方法, 進(jìn)行選擇器嵌套.
- 瀏覽器是不識(shí)別less的,只識(shí)別css
- 使用less時(shí),要編譯成css,才能運(yùn)行
- 使用軟件kola,將less轉(zhuǎn)換成css.
less用法
1.定義常量： @常量名稱：值
<div class="box">sk666</div>
<div class="box2">aaaa</div>
.red{
color:red;
border: 4px solid orange;
}
.blue{
color:blue;
}
//1.常量
@width:200px;
.box{
width: @width;
height: @width;
background: #000;
.red;//設(shè)置文字顏色紅色
}
2.定義方法
- 2.1 上面定義方法加括號(hào),下面必須加括號(hào)調(diào)用
.bd(){
}
.box2{
.box;
.bd();
}
- 2.2 方法傳參, 參數(shù)個(gè)數(shù)和類型要匹配
- @color, @color2方法形參
.color(@color, @color2){
color:@color;
border: 6px solid @color2;
}
.box{
width: @width;
height: @width;
background: #000;
.red;//設(shè)置文字顏色紅色
.color(red, yellow);
}
- 2.3 根據(jù)傳入?yún)?shù), 調(diào)用不同方法, 并且可以給形參添加默認(rèn)值
.color(r, @color:orange, @color2:purple){
color:@color;
border-right: 6px solid @color2;
}
.color(l, @color:red, @color2:blue){
color:@color;
border-left: 6px solid @color2;
}
.box{
width: @width;
height: @width;
background: #000;
.red;//設(shè)置文字顏色紅色
.color(l);
}
3.嵌套使用
.box2{
.box;
ul{
li{
&:hover{//&: 上一級(jí)標(biāo)簽
color:#fff;
}
}
}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
