css预处理器-less

1、less简介

2、编译工具

3、注释

4、less中的变量

5、less中的嵌套规则

它是一组CSS属性，允许将一个类的属性用于另一个类，并且包含类名作为其属性。 在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。

6、less的混合

7、less运算

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。 操作节省了大量的时间，当你使用变量，让感到就像是简单的数学工作。

8、less继承

9、less避免编译

它动态构建选择器，并使用属性或变量值作为任意字符串。

p {
  color: ~"green";
}

10、less的函数

LESS映射具有值操作的JavaScript代码，并使用预定义的函数来操纵样式表中的HTML元素。 它提供了操作颜色的几个功能，如圆函数，floor函数，ceil函数，百分比函数等。

@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
 width: percentage(@width);
}

编译后：

.mycolor {
  color: #FF8000;
  width: 100%;
}