Less 小技巧

避免编译

有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。要输出这样的值我们可以在字符串前加上一个 ~,例如:

.class {
   filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

我们可以将要避免编译的值用 “”(双引号) 包含起来,输出结果为:

.class {
   filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

使用 JS 表达式

JavaScript 表达式也可以在 .less 文件中使用。可以通过反引号的方式使用,例如:

@var: `"hello".toUpperCase() + '!'`;

输出:

@var: "HELLO!";

注意:你也可以同时使用字符串插值和避免编译:

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

输出:

@var: HELLO!;

它也可以访问 JavaScript 环境:

@height: `document.body.clientHeight`;

如果你想将一个 JavaScript 字符串解析成16进制的颜色值, 你可以使用 color 函数:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号