1.less的使用方法 ：自行搜索
2.注釋:
//單行注釋(通常用于生產(chǎn)環(huán)境)
/**/多行注釋
區(qū)別:多行注釋會(huì)被解析到css文件中,單行不會(huì)
3.變量
變量允許我們定義一系列通用的樣式熬甫，然后在需要的時(shí)候去調(diào)用所以在做全局樣式調(diào)整的時(shí)候我們可能只需
要修改幾行代碼就好了
@符號(hào)開(kāi)頭：@width:12px;
例子: @width:2px;
@style:solid;
@red:red;
@blue:blue;
.box1{
width:200px;
height:100px;
border:@width @style @red;
}
.box2{
width:200px;
height:100px;
border:@width @style @blue;
}
.box3{
width:200px;
height:100px;
border:@width @style @red;
background:@red;
}
更改樣式只需要引用變量名即可,方便
4.作用域（變量發(fā)生作用的區(qū)域）
.box{
@width:20px;
.main{
wdith:@width;
}
}
這樣是沒(méi)問(wèn)題的,{}就是域,和js一樣
.box2{
width:@width;//在這里引用@width變量
}
這樣是錯(cuò)誤的,會(huì)報(bào)錯(cuò)
4.嵌套
我們可以在一個(gè)選擇器中嵌套另一個(gè)選擇器來(lái)實(shí)現(xiàn)繼承栖秕，這樣很大程度減少了代碼量邢笙，并且代碼開(kāi)起來(lái)更加
清晰。
例如：寫(xiě)一個(gè)導(dǎo)航欄
html結(jié)構(gòu):
<nav>
<div class='content'>
<div.left>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div.right>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
</nav>
nav{
height:50px;
background:blue;
.content{
margin:0 auto;
width:80%;
a{
color:#fff;
&:hover{ //&符號(hào)代表a標(biāo)簽本身
color:red;
}
}
.left{
float:left;
&.padding-left{ //給.left添加padding-left墅拭，需要&符號(hào),看編譯好的css
padding-left:20px;
}
}
.right{
floar:right;
}
}
}
結(jié)構(gòu)很清晰,父子級(jí)等關(guān)系很明顯
5.混合
@border:'border solid #ccc';
box{
width:@border;
}
以上是錯(cuò)誤的方式
混合：將一個(gè)定義好的classA引入到另一個(gè)classB中秒咐，從而實(shí)現(xiàn)classB繼承classA中的所有屬性
1.最簡(jiǎn)單的混合方式：
.classA{
border:1px solid #ccc;
}
.clearFix{
*zoom:1;
&:after{
content:' ';
display:block;
clear:both;
}
}
//公用樣式放到前面
.classB{
.classA;
.cleafFix;
}
2.帶參數(shù)的混合:
.border(@color){
border:1px solid @color;
}
.box1{
.border(#ccc);
}
.box2{
.border(#f00);
}
3.多個(gè)參數(shù)的混合
.border(@width,@style,@color){
border:@width @style @color;
}
.box1{
.border(1px,solid,#ccc);
}
.box2{
.border(1px,solid,#f00);
}
.box3{
.border(2px,solid,#f00);
}
.box3{
.border(2px,dotted,#f00);
}
實(shí)參形參一一對(duì)應(yīng),一個(gè)都不能少
4.帶默認(rèn)值的參數(shù)混合
.border(@width:1px,@style:solid){
border:@width @style #ccc;
}
.box1{
.border(1px dotted);//如果修改第二個(gè)參數(shù)的話都必須傳實(shí)參,一一對(duì)應(yīng)
}
.box2{
.border();
}
.box3{
.border(2px);
}
.box3{
.border();
}
5.arguments變量:代表了所有的參數(shù)(在不在乎參數(shù)順序的時(shí)候可以使用)
.border(@style:solid,@width:1px){
border:@arguments #ccc;
}
.box1{
.border(1px dotted);//如果修改第二個(gè)參數(shù)的話都必須傳實(shí)參,一一對(duì)應(yīng)
}
.box2{
.border();
}
.box3{
.border(2px);
}
.box3{
.border();
}
5.模式匹配
.border(top,@width:1px){
border-top:@width solid #ccc;
}
.border(right,@width:1px){
border-right:@width solid #ccc;
}
.border(bottom,@width:1px){
border-bottom:@width solid #ccc;
}
.border(left,@width:1px){
border-left:@width solid #ccc;
}
.border(@_,@width:1px){
width:100px;
}
.box1{
.border(top,5px);
}
.box2{
.border(right);
}
.box3{
.border(bottom,round(2.3)*1px);//Math函數(shù)用法
}
.box4{
.border(left);
}
//@_ 代表公用樣式,即使有@_，使用的時(shí)候還是要傳首參
//Math()函數(shù) ：
round(5.5);四舍五入
ceil(2.1);return 3 宿亡，向上取整
floor(2.9);return 2, 向下取整
6.命名空間
.blue{
.button{
background:blue;
}
}
.red{
.button{
background:red;
}
}
.box{
.red > .button;
}
7.import
引入另一個(gè)less文件
@import 'global';//后綴名.less可加可不加
例如寫(xiě)一個(gè)樣式重置,在里面可以定義一個(gè)變量@rem:32rem;這個(gè)變量可以直接使用
8.避免編譯
.box{
width:@rem;
font:(12/@rem)~'/'(20/rem) '宋體';
}
