1

私はlesshatで作業しようとしました。プロジェクトのルート フォルダーに lesshat.less mixins ライブラリをアップロードしました。そして、セレクターと mixin 呼び出しを 1 つだけ使用して、lesshat-tests.less という 1 つの .less ファイルを作成しました。

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

そのファイルを Webstorm レス css コンパイラ プラグインでコンパイルし、node.js モジュール レス コマンド lessc を使用してコンパイルしようとしました。Lessc は空のファイルを作成し、webstorm プラグインは、プラグインが JS 関数を評価できないことを示すエラーを生成します。

いくつかの関数を使用してこの mixin を見ました。しかし、less 内での JS の使用に関する情報は得られません。お願い助けて。

4

1 に答える 1

0

Lesshat の mixin のほとんどは Javascript で記述されています。less コンパイラ自体も JavaScript で記述されており、Less コード内の逆引用符で囲まれたネイティブ JavaScript 呼び出しを評価します。

おそらく、Webstorm レス CSS コンパイラ プラグインは Javascript 呼び出しを評価できません。lessc コンパイラが動作するはずです。

https://raw.githubusercontent.com/madebysource/lesshat/master/build/lesshat.lessから Lesshat ミックスインをダウンロードし、実行してコードをコンパイルすると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%);
}
于 2014-10-04T12:50:38.190 に答える