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%);
说说我的看法
全部评论(
没有评论
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
公众号