我曾尝试使用 lesshat。我已将 lesshat.less mixins 库上传到我的元素根文件夹。并创建了 1 个 .less 文件 - lesshat-tests.less 只有一个选择器和 mixin 调用。
@import "lesshat";
div {
.background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%));
}
我尝试使用 Webstorm less css 编译器插件编译该文件,并使用 node.js module less 命令 lessc。 Lessc 生成空文件,webstorm 插件生成错误,提示插件无法评估 JS 函数。
我看到这个 mixin 使用了一些函数。但是我无法获得有关在 less 中使用 JS 的任何信息。 请帮帮我。
最佳答案
Lesshat 的大部分 mixins 都是用 Javascript 编写的。 less 编译器本身也是用 JavaScript 编写的,并在你的 Less 代码中计算本地 JavaScript 调用,放在反引号之间。
可能您的 Webstorm less css 编译器插件无法评估 Javascript 调用。 lessc 编译器应该可以工作。
当我从 https://raw.githubusercontent.com/madebysource/lesshat/master/build/lesshat.less 下载 Leshat mixins 时并通过运行 lessc yourcode.less
编译您的代码我在控制台中得到以下输出:
div {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmYjgzZmEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5M2NlYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
background-image: -webkit-linear-gradient(top, #fb83fa 0%, #e93cec 100%);
background-image: -moz-linear-gradient(top, #fb83fa 0%, #e93cec 100%);
background-image: -o-linear-gradient(top, #fb83fa 0%, #e93cec 100%);
background-image: linear-gradient(to bottom, #fb83fa 0%, #e93cec 100%);
}
关于css - Lesshat .background-image 对我不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22463741/