Less与Sass属性插值：差异与解决方案
CSS属性值可通过变量动态设置。Sass利用@function函数实现动态CSS变量生成，但在Less中直接套用此方法会出错。
Less中的替代方案
Less提供了一种不同的语法来实现类似Sass @function的功能：
立即学习“前端免费学习笔记（深入）”；
.color(@token) { color: rgb(var(~"--color-@{token}"));}其中，~符号用于转义变量名，防止Less将其误认为Less变量。
网易人工智能
网易数帆多媒体智能生产力平台
206 查看详情
使用方法：
方法一：直接调用并提取属性值
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变量生成？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1146659.html
微信扫一扫 
支付宝扫一扫 
