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:

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180307G0CEYM00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券