Lesshat .background-image не работает для меня

Question

Я пытался работать с Lesshat. Я загрузил lesshat.less mixins в феврале в корневую папку моего проекта. И создал 1 файл.less - lesshat-tests.less только с одним селектором и смешанным вызовом.

@import "lesshat";
div {
    .background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%));
}

Я пытался скомпилировать этот файл с помощью плагина компилятора CSS css и использую модуль node.js без команды lessc. Lessc создает пустой файл, плагин webstorm генерирует ошибку, которая говорит о том, что плагин не может оценить функцию JS.

Я видел этот миксин, используя некоторые функции. Но я не могу получить никакой информации об использовании JS внутри. Помоги мне, пожалуйста.

Answer 1

Большинство миксинов Lesshat написаны на Javascript. Сам компилятор less написан также на JavaScript и оценивает нативные вызовы JavaScript, помещенные между обратными кавычками, в вашем коде Less.

Вероятно, ваш плагин компилятора CSS css не может оценивать вызовы Javascript. Компилятор lessc должен работать.

Когда я загружаю миксины Lesshat с https://raw.githubusercontent.com/madebysource/lesshat/master/build/lesshat.less и компилирую ваш код, запустив 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%);
}