Less实战（四）：嵌套（Nesting）+ 运算（Operations）+ 转义（Escaping）

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

嵌套（Nesting）

index.less代码 >>>

#sex{
    color: red;
}

#sex .man{
    color: blue;
}

#sex .woman{
    color: pink;
}

改为嵌套后 >>>

#sex {
    color: red;
    .man {
      color: blue;
    }
    .woman {
      color: pink;
    }
  }

编译为css后 >>>

#sex {
  color: red;
}
#sex .man {
  color: blue;
}
#sex .woman {
  color: pink;
}

---

@规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

index.less代码 >>>

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

编译为css后 >>>

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

---

运算（Operations）

就是日常的基本操作，什么加减乘除之类的，计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

index.less代码 >>>

@width:10px;

@second-width:@width+20px;
@third-width:@width/2;
.demo1{
  width: @second-width;
}

.demo2{
  width: @third-width;
}

编译成css后 >>>

.demo1 {
  width: 30px;
}
.demo2 {
  width: 5px;
}

---

转义（Escaping）

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出，除非 interpolation。

index.less代码 , 不加 ~ 的情况 >>>

@min768: "(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译后，爆红报错 >>>

---

index.less代码 >>>

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

写成这样也行 >>>

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译完成后 , 完美成功 >>>

---

下一章进行less学习最后的讲解，有些太深入的需要去官方看文档，其实平时开发自己的less也不一定全部逗得用上，只要能高效解决问题实现目标的就是好办法