使用less应该注意的一些事项

Posted 2020-10-05 李灏峰

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