Less 总结

什么是Less

• Less是一门向后兼容的 CSS 扩展语言。它为css新增许多能，如：变量、函数、作用域、混合、嵌套等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，less可以让我们写更少的代码做更多的事情。
• 它需要编译为css再被引入：lessc xxx.less yyy.css

注释

在less中，有两种注释

/*这是会暴露出去的注释 */
// 这是不会暴露出去的注释

变量

• less中的变量具有块级作用域，那么也就意味着我们不可以在{}外的地方使用{}内的变量。
• 变量用于选择器名、属性名、URL、@import语句
• 变量具有延迟加载：当一个变量被声明多次，会取最后一次的值，并从当前作用域往外寻找变量。
• 变量需用@{}包围

@m: margin;
@selector: #parent;
* {
  @{m}: 0;
  padding: 0;
}
@{selector} {
  width: 800px;
  height: 300px;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

嵌套

Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力，使代码条例更加清晰。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
// 编译后
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

@arguments获取参数

.border(@1,@2,@3) {
  border: @arguments;
}

转义(避免编译)

使用~“anything” 或 ~'anything’的内容将会原样输出

运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

Mixins混合

• 混合是一种将一组属性从一个规则集混入另一个规则集的方法。
• less有以下几种混合：
  1.普通混合：不加()，预定义样式会输出,但这没必要，所以要加上()
  2.不带参数的混合：预定义样式不会输出
  3.带参数的混合：可以传参,参数不匹配会报错
  4.带参数并且有默认值的混合：不传参不报错
  5.命名参数：只给指定参数传参
  6.匹配模式: triangle例子
  7.arguments变量: 03.less例子

.triangle(@_, @w, @c) {
  width: 0px;
  height: 0px;
  overflow: hidden;
}

.triangle(L, @width, @color) {
  border: @width solid transparent;
  border-left-color: @color;
}

.triangle(R, @width, @color) {
  border: @width solid transparent;
  border-right-color: @color;
}

.triangle(T, @width, @color) {
  border: @width solid transparent;
  border-top-color: @color;
}

.triangle(B, @width, @color) {
  border: @width solid transparent;
  border-bottom-color: @color;
}

.juzhong(@width: 50px, @height: 30px, @c: #bda4a4) {
  @var: 200;
  font-weight: @var;
  @var: 700;
  width: @width;
  height: @height;
  background-color: @c;
  &:hover {
    background-color: pink;
  }
}

@{selector} {
  #child {
    .juzhong(100px, 200px, lightblue);
  }
  #child2 {
    .juzhong(@c: lightpink);
  }
  #triangle {
    // 自定义的混合API
    .triangle(T, 20px, rgb(205, 177, 206));
  }
}

继承

• 继承可让多个选择器应用同一组属性，最终编译为并集选择器。其性能比混合高，但灵活性比混合低

  ..child {
    &:extend(.juzhong);
      width: 100px;
      height: 100px;
      background-color: pink;
  }
	//等价于
 .child:extend(.juzhong) {
 	  width: 100px;
      height: 100px;
      background-color: pink;
 }