Less 函数 & 运算

Less 的运算提供了加,减,乘,除操作。我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。

LESS中的函数映射了 JavaScript 代码,如果你愿意的话可以操作属性值。

示例

例子一

Less中运算符和函数的应用。

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
 // 乘法操作
 color: @base-color * 3;
 border-left: @the-border;
 border-right: @the-border * 2;
}

#footer {
 color: @base-color + #003300;
 // 调用函数 desaturate
 border-color: desaturate(@red, 10%);
}

编译 less,输出的 CSS 如下:

#header {
 color: #333333;
 border-left: 1px;
 border-right: 2px;
}
#footer {
 color: #114411;
 border-color: #7d2717;
}

例子二

任何数字、颜色或者变量都可以参与运算。例如:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位。如果像下面这样单位运算的话:

@var: 1px + 5;

LESS 会输出 6px。括号也同样允许使用:

.mixin(@var) {
   width: (@var + 5) * 2;
}

并且可以在复合属性中进行运算:

.mixin(@width) {
   border: (@width * 2) solid black;
}
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号