css 预处理之 less

Less 中文网

编译 less

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

注释

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

变量

通过 @ 符号声明变量

@size: 12px;

div {
  font-size: @size;
}

混合

1. 基本用法

.sty1 {
  width: 100px;
}
.sty2 {
  /* 继承 .sty1 中的所有样式 */
  .sty1;
  height: 100px;
}

2. 可传参数

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

3. 默认带值

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

嵌套规则

<ul class="list">
  <li><a></a><span></span></li>
</ul>

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

附录

• 使用 & 拼接类名

<div class="title">
  <div class="title_nav"></div>
</div>

.title {
  &_nav {
    // &_nav 相当于 .title_nav
    // ...
  }
}

• 导入 less 文件：@import “less”;
• 导入 css：@import “body.css”;
• 导入并编译 css：@import (less) “body.css”;