有没有办法在<style>元素中使用LESS?

时间:2015-06-21 12:53:14

标签: html css less polymer web-component

我正在尝试使用Polymer,并希望能够在&lt; style&gt; 标记内使用LESS。因此,我希望能够执行以下操作:

&#xA;&#xA;
 &lt; style&gt;&#xA;我的组件{&#xA;颜色:@primary;&#xA; .align伪-MID();&#XA; }&#xA;&lt; / style&gt;&#xA;  
&#xA;&#xA;

(对我而言,网络组件的一大好处就是能够打包商标在一个文件中一起设置样式,因此使用单独的LESS样式表并不理想。)

&#xA;

2 个答案:

答案 0 :(得分:2)

我建议您使用链接到的外部样式表,而不是在样式元素中使用较少的内容。

所以foo.less,编译为foo.css。然后在您的元素中,您将链接到foo.css

<link rel="import" type="css" href="foo.css">

以下是解释:https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets

答案 1 :(得分:0)

是的,这是可能的。看到 https://stackoverflow.com/a/9710229/4912760。还有http://lesscss.org/#client-side-usage。您需要在页面中获取并使用less.js脚本。然后,您需要将样式标记的type属性设置为“text / less”。