less即学即用

编译less

可以使用Koala将less文件编译成css文件，或者VS-Code安装Easy LESS插件

注释

1. 经过 /*内容*/ 注释（编译后注释会保存在css文件中）
2. 经过 //内容 注释（编译后注释不会保存在css文件中）

变量

经过 @ 符号声明变量

@size: 12px;

div {
  font-size: @size;
}

混合

1. 基本用法

.sty1 {
  width: 100px;
}
.sty2 {
  .sty1; // 继承 .sty1 中的全部样式
  height: 100px;
}

1. 可传参数

.border(@border_wid) {
  border: @border_wid solid #eeeeee;
}
.div {
  .border(1px);
}

1. 默认带值

.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";

参考资料

• Less 中文网

本做品系原创 采用《署名-非商业性使用-禁止演绎4.0 国际》许可协议