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‘才
能编译