1.要想在瀏覽器訪問less寫的css效果：
@1：使用考拉編譯成css在引入
@2：在html頭部引入
<link rel="stylesheet/less"
type="text/css" href="index.less">
<script
src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.
3/less.min.js"></script>
less文件一定要放在js的前面 而且
link的rel必須是stylesheet/less

2.聲明變量 @變量名:值（@w:200px）

3.註釋 /**/編譯的 //的註釋不編譯

4.混合
@1:.border{
border:1px solid #000;
}
.border加入類名中
@2:帶參數
.border(@border-w){
border: @border-w solid #000;
}
.border(5px)
@3：參數有默認值
.border-01(@border-w:5px){
border: @border-w solid #000;
}
.border-01() 使用默認的值
.border-01(10px)

5.匹配模式（相當於If）
.transsanjiao(@_,@w:10px,@c:#333) @_始終
帶著這裏的樣式

6.運算 + - * /

7.嵌套規則 li{
a{}
}
&:表示上一級選擇器

[email protected]
.border-02
(@w:10px,@xx:solid,@c:#234521){
border: @arguments; 把所有的參數都帶
上
}

使用@arguement的技巧：如果不知道要傳參的個數使
用... 如果傳的參數在使用時想用特殊的符號分隔開 css
特性：~`@{arguments}.join(",")` 傳參的時候記得用""
引號才有作用
例如：.transiton-property(...){
-webkit-transition-property:~`@
{arguments}.join(",")`;
-moz-transition-property:~`@{arguments}.join
(",")`;
-ms-transition-property:~`@{arguments}.join
(",")`;
-o-transition-property: ~`@{arguments}.join
(",")`;
transition-property: ~`@{arguments}.join
(",")`;
}
使用：.transiton-property("-webkit-
transform","width","left");

9.避免編譯 ~‘calc(300px-30px)‘
!important .border-02()!important

10.用@import引入的css文件 @import(less) ‘a.css‘才
能編譯

使用less應該註意的一些事項