我要评论
less与sass属性插值：差异与解决方案
css属性值可通过变量动态设置。sass利用@function函数实现动态css变量生成，但在less中直接套用此方法会出错。
less中的替代方案
less提供了一种不同的语法来实现类似sass @function的功能：
.color(@token) {
color: rgb(var(~"--color-@{token}"));
}登录后复制
其中，~符号用于转义变量名，防止less将其误认为less变量。
使用方法：
方法一：直接调用并提取属性值
body {
background: .color("abc")[color];
}登录后复制
方法二：先调用函数，再使用返回值
.color(@token) {
@color: var(~"--color-@{token}");
}
body {
.color("abcd"); //调用函数
background: @color; // 使用返回值
}登录后复制
通过以上方法，即可在less中实现sass @function函数的动态css变量生成效果。
以上就是less和sass属性插值：如何用less实现sass中@function类似的动态css变量生成？的详细内容，更多请关注代码网其它相关文章！
发表评论