LESS分享

变量

使用@符号声明变量
公共样式，可以提取出变量，在多个地方使用，便于维护。

@primary-color: #268DFF; //主色

.box1 {
  color: @primary-color;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: @primary-color;
}

编译为

.box1 {
  color: #268DFF;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: #268DFF;
}

嵌套

.box {
  .text {
    color: blue;
  }
  .text2 {
    color: red;
  }
}

编译为

.box .text {
  color: blue;
}
.box .text2 {
  color: red;
}

父级选择器

使用 & 引用父选择器
&操作符代表嵌套规则的父选择器，最常用在对现有选择器应用修改类或伪类时

.text {
  color: blue;
  &:hover {
    color: pink;
  }
}

编译为

.text {
  color: blue;
}
.text:hover {
  color: pink;
}

运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算

@width: 200px;
@height: 500px;
@bgColor: #123456;
@color: red;

.box {
  width: @width + 2;
  height: (@height / 2);
  background: @bgColor * 2;
  color: @color - 2;
}

编译为

  width: 202px;
  height: 250px;
  background: #2468ac;
  color: #fd0000;

• 运算符中间左右必须有空格隔开 1px + 5；
• 对于两个不同单位值之间的运算，运算结果的值会取第一个值的单位 5px + 10em，单位就是px
• 如果两个值之间只有一个值有单位，则运算结果就取该单位

mixin合并

• 可以把 class 选择器 和 id 选择器混入到其他样式中。例如:

.border {
  border: 1px solid red;
}
.box1 {
  .border;
}

编译为

.border {
  border: 1px solid red;
}
.box1 {
  border: 1px solid red;
}

• 带参数的混入

.border-radius (@radius: 1px) {
  border-radius: @radius
}
.box1 {
  .border-radius(10px);
}

编译为

.box1 {
  border-radius: 10px;
}