编译less
可使用Koala将less文件编译成css文件，或者VS-Code安装Easy LESS插件
注释
- 通过
/*内容*/注释（编译后注释会保存在css文件中） - 通过
//内容注释（编译后注释不会保存在css文件中）
变量
通过 @ 符号声明变量
@size: 12px;
div {
font-size: @size;
}
混合
- 基本用法
.sty1 {
width: 100px;
}
.sty2 {
.sty1; // 继承 .sty1 中的所有样式
height: 100px;
}
- 可传参数
.border(@border_wid) {
border: @border_wid solid #eeeeee;
}
.div {
.border(1px);
}
- 默认带值
.border(@border_wid:2px) {
border: @border_wid solid #eeeeee;
}
.div {
.border();
}
.div2 {
.border(1px);
}
匹配模式
.triangle (top, @w:5px, @c:#ccc) { // 箭头向上的三角形
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle (bottom, @w:5px, @c:#ccc) { // 向下
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: dashed dashed solid dashed;
}
.triangle (left, @w:5px, @c:#ccc) { // 向左
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed dashed solid dashed;
}
.triangle (right, @w:5px, @c:#ccc) { // 向右
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed solid dashed;
}
.triangle (@_, @w:5px, @c:#ccc) { // 默认样式（不管是否匹配到上面的样式，这里的样式都会编译进去）
width: 0px;
height: 0px;
overflow: hidden;
}
.div {
.triangle(bottom, @w: 10px, @c: #333);
}
运算
任何数字，颜色或变量都可以参加运算，只要有一个带单位即可
注： 运算符前后要加空格
@test_01:300px;
.box_02{
width:@test_01 + 20;
height: (@test_01 - 200) * 5;
background:#ccc - 10;
}
嵌套规则
// html
<ul class="list">
<li><a></a><span></span></li>
</ul>
// less
.list {
li {
// ...
}
a { // a 的样式也可写在 li 里面，但尽量减少嵌套，嵌套越多，匹配次数越多，影响加载
// ...
&:hover { // & 代表上一层选择器
// ...
}
}
span {
// ...
}
}
@arguments 变量
@arguments 代表所有传递进来的参数
.border (@w:1px, @s: solid, @c: red) {
border: @arguments;
}
.test_border {
.border(20px);
}
避免编译
用引号（单双引号都可以）包住并在前面加上 ~ 即可防止被编译
.test1 {
width: ~'calc(100% -30px)';
}
!important
使用 !important 后，.main() 内所有样式后面都会加上 !important
.main {
width: 10px;
height: 10px;
}
.test2 {
.main() !important;
}
附录
- 使用 & 拼接类名
// html
<div class="title">
<div class="title_nav"></div>
</div>
// less
.title {
&_nav { // &_nav 相当于 .title_nav
// ...
}
}
- 导入 less 文件：@import "less";
- 导入 css：@import "body.css";
- 导入并编译 css：@import (less) "body.css";
参考资料
本作品系原创 采用《署名-非商业性使用-禁止演绎4.0 国际》许可协议
