less 基础

 Less 是一种向后兼容的CSS语言扩展。Less.js 则是将Less样式转换为CSS样式的JS工具。

1 变量

在单个位置控制常用值。它不止可以用来控制CSS规则中的值，也可以用在其他地方，例如选择器名称、属性名称、URL等。

@link-color-hover: #428bca;
@selector: custom;
@att-name: color;
@background-url: "../images";

a:hover{
  color: @link-color-hover; // 用于属性值
}

@{selector} { // 用于选择器
  width: 10px;
  @{att-name}: red; // 用于属性
  background: url("@{background-url}/img.png"); // 用于url
}
----------------csss
a:hover {
  color: #428bca;
}
custom {
  width: 10px;
  color: red;
  background: url("../images/img.png");
}

1. 可以使用另一个变量定义一个变量的名称。
2. 可以使用$prop语法将属性视为变量。

@primary: green;

.section {
  @color: primary;
  
  color: @@color; // 可变变量
  background-color: $color; // 将属性视为变量
}

---------------------------css
.section {
  color: green;
  background-color: green;
}

2 父级选择器

使用&引用父选择器。& 可以在逗号分隔列表中生成选择器的所有可能排列。

.block {
   &:hover { color:red; }
   & & { color:red; } // 多个 &
   & > & { color:red; }
   span & { color:red; } // 更改选择器顺序
 }
 
 a,span { 
   & + & { color:red; } // 组合爆炸
 }

-------------------------css
.block:hover {
  color: red;
}
.block .block {
  color: red;
}
.block > .block {
  color: red;
}
span .block {
  color: red;
}
a + a,
a + span,
span + a,
span + span {
  color: red;
}

3 继承

extend是一个less伪类，它将它所放置的选择器与其引用的匹配的选择器合并。

.div {
  color: red;
}
span .custom { 
  &:extend(.div); // 等效于 span .custom:extend(.div) {}
} 
------------------------------css
.div,
span .custom {
  color: red;
}

如果在扩展参数中最后没有指定all关键字，那么它在匹配引用时，时严格精准匹配的。

指定了all，则会将匹配的引用作为另一个选择器的一部分进行匹配。选择器将被复制，然后选择器匹配部分将被扩展替换，从而形成一个新的选择器。

.class {
  .custom {
    div {
       color: red;
       table {
         width: 20px;
       }
    }
    span {
       color: green;
    }
  }
}
.usr:hover:extend(.custom div all) {}

------------------------------------css
.class .custom div,
.class .usr:hover {
  color: red;
}
.class .custom div table,
.class .usr:hover table {
  width: 20px;
}
.class .custom span {
  color: green;
}

4 混入

混入是一种将一组属性从一个规则集中包含混合进入到另一个规则集中的方法。

.custom { // 规则集内容会输出到css
  &:hover {
    color: blue;
  } // 会把选择器也混入到新的集合中
  height: 10px;
}
#custom2() { // 添加括号后,规则集内容不会输出到css
  background-color: green;
}
.other {
  .custom(); 
  #custom2();
}

---------------------------------css
.custom {
  height: 10px;
}
.custom:hover {
  color: blue;
}
.other {
  height: 10px;
  background-color: green;
}
.other:hover {
  color: blue;
}

4.1 参数与重载

使用混入时，可以像函数一样接受参数。这些参数可以给规则集传递值。

1. 和js函数一样，它也具备函数重载的功能。
2. 传递参数时，可以指明参数名，这样参数就可以不必按照顺序来传递了。

.custom-mixed(@color) {
  color-1: @color;
}

.custom-mixed(@color, @padding:2px) { // 可以指定默认参数
  color-2: @color;
  padding: @padding;
}

.custom-mixed(@color, @padding:3px, @margin:4px) {
  color-3: @color;
  padding: @padding;
  margin: @margin;
}

button {
  .custom-mixed(green); // 会匹配第1,2,3个混入
}

div {
  .custom-mixed(@padding:3px, @margin:4px,@color: red); // 指明参数名，参数顺序无关，匹配第3个混入
}

--------------------------------------css
button {
  color-1: green;
  color-2: green;
  padding: 2px;
  color-3: green;
  padding: 3px;
  margin: 4px;
}
div {
  color-3: red;
  padding: 3px;
  margin: 4px;
}

4.2 合并属性

可以将来自多个属性的值聚合到单个属性下的逗号或空格分隔列表中。

逗号分隔：属性名+

空格分隔：属性名+_

.mixin() {
  box-shadow+: inset 0 0 10px #555; // 逗号分隔
  box-shadow2+_: inset 0 0 10px #555; // 空格分隔
}

.class {
  .mixin();
  box-shadow+: 0 0 20px black;
  box-shadow2+_: 0 0 20px black;
}

---------------------------------------css
.class {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
  box-shadow2: inset 0 0 10px #555 0 0 20px black;
}

4.3 映射

使用规则集和混合作为值映射，通过将命名空间与查找[属性名]语法相结合。当属性名为空时，取该集合最后一个属性值。

.mixin() {
  color: red;
  width: 10px;
}

button {
  color: .mixin[color];
  width: .mixin[];
}

----------------------------css
button {
  color: red;
  width: 10px;
}

4.4 CSS 守卫

用于给混入或者选择器的参数/属性添加判断条件。

1. 关键字是when。
2. 关键字true 是唯一的真值，其他以外的任何值都是假的。
3. 比较运算符：>、>=、=、=<、<
4. 逻辑运算符：and、not及用逗号分隔守卫来模拟or。

.mixin(@width,@height) when(@width >= 10px) and (@height <= 20px) {
   color: red;
}
.mixin2(@width,@height) when(@width < 5px),(@height > 10px){
   width:20px;
}

button{
  .mixin(10px,20px);
  .mixin2(10px,20px);
}
div{
  .mixin(9px,12px);
  .mixin2(9px,12px);
}

---------------------------------css
button {
  color: red;
  width: 20px;
}
div {
  width: 20px;
}