Less常用语法整理

注释

声明变量

@变量名: 变量值

例如：

编译后的css：

混合声明

混合声明其实就是把一个选择器直接当做变量。

例如：

编译后的css：

带参数的混合声明

带参数的混合声明跟js中的函数很类似，形参是上文所提到的变量，调用混合声明的时候需要传实体参数。

例如：

编译后的css：

带默认参数的混合声明

带默认参数的混合声明，是普通混合声明和带参混合声明的结合体。调用的时候可以传参也可以不传，如果不传参数则会编译成默认参数。

例如：

编译后的css：

匹配模式

匹配模式类似于JS中的if语句，但不完全是。 通过混合模式的第一个参数来筛选调用，只有满足条件后才能成功匹配。 匹配模式下，第一个参数是必须有的，之后的参数根据具体情况定。

例如：

编译后的css：

变量 @arguments

这个是一个特殊变量，它代表了一个混合声明中的所有参数。

例如：

编译后的css：

运算

Less可以进行尺寸以及颜色的运算。

例如：

编译后的css：

嵌套

嵌套功能是Less中最有意思的功能，也是最实用的。

有嵌套关系的html元素的样式，可以直接使用嵌套 例如：

编译后的css：

伪类可以使用嵌套

这里会用到&这个符号，它代表了它的上一层选择器。

例如：

编译后的css：

变量与字符串的拼接

变量需要放在@{}的花括号里，随后就可以酸意拼接字符串了。

例如：

编译后的css：

避免被编译

有时候我们需要输出一些不正确的css语法或者使用一些Less不认识的专用语法，这时候要输出这样的值我们可以在字符串上加上 。

例如：

编译后的css：

!important关键字

在混合上加!important，会为所有混合所带来的样式都添上 !important。

例如：

编译后的css：