在LESS CSS中使用JavaScript/Switch语句

有没有在LESS CSS文件中使用JavaScript的方法..？在LESS CSS中使用JavaScript/Switch语句

什么我目前做的是这样的：

.f(@l) { 
float: @l; 
} 

#header { 
.f(left); 
}

我试图做到的，是这样的。

.f(@l) { 
    // use switch or JS function to figure out what @l is and use that. 
    // for example in this case it could be "l" = left - "r" = right - "n" = none(...) 
float: @l; 
} 

#header { 
.f(l); 
}

这将是冷静，即使我们可以把JS代码在less.js文件，然后可以从.LESS文件（Source）

一点题外话执行它，我使用jQuery在这个页面上，如果有任何插件/黑客使用它，这些也是受欢迎的。谢谢！

来源

2011-06-14 DMin

听起来很像IE行为和表达式。 – BoltClock 2011-06-14 16:46:24

我不知道LESS是为了让你的CSS不可读...;） – Guffa 2011-06-14 16:48:15

LOL！ :)我正在尝试使用像传统一样的zen-html/css来缩短css的编写时间。像'bgc'代表'background-color'或'bgi'代表'background-image：url（）' - CSS有时候写得太长。 – DMin 2011-06-14 16:54:31

您可以嵌入在你的lesscss文件中的JavaScript（与反引号）详情点击这里：

http://lesscss.org/#-javascript-evaluation

编辑：如果该链接将带您到页面的顶部（因为它为我有时）搜索/向下滚动至“Javascript评估”部分

来源

2011-06-14 16:53:33 JasonWoof

我意识到反作用，但我不认为你可以超越一条线。我尝试实施我正在尝试做的事，但无法实现它的工作。 – DMin 2011-06-14 16:57:32

@DMin a）一行可以是一个方法调用，其中的方法可以做任意事情b）上帝，这个功能很糟糕！ – 2011-06-14 17:00:35

你会认为它不会更糟糕，再想一想。我使用三元运算符（有时嵌套;））。我的工作非常难以预料，所以我决定不用整个JavaScript。 – DMin 2011-06-21 08:28:14

您能结合jQuery templates与dynamic stylesheets。

因此，在您例如，你可以这样定义

<script type="text/x-jquery-tmpl" id="dynstyles"> 
.f(${l}) { 
    float: ${l}; 
} 

#header { 
    .f(left); 
} 
</script> 
<script> 
document.write(
    "<style>", 
    $.template("#dynstyles").tmpl({ l: "left" }), 
    "</style>"); 
</script>

来源

2011-06-14 16:55:01

东西这里是你如何使用三元运算符在一个简单的表达

// add extra width if @miniPlayButton is true 
@extraWidth: ~`('@{miniPlayButton}' == 'true' ? 1 : 0)`; 

width: 2em + unit(@extraWidth, em);

记住规则的Javascript不知道单位，比如em所以我发现这样做更容易（也更清晰）。

如果有类似的简单'食谱'更好的参考，请张贴它。

我使用.NET BundleTransformer运行此服务器端。需要添加javasriptEnabled，否则您会收到错误消息“语法消息：您正在使用已禁用的JavaScript。”

<less useNativeMinification="false" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None" 
     javascriptEnabled="true" > 
    <jsEngine name="MsieJsEngine" /> 
    </less>

来源

2015-03-19 01:33:04

在LESS CSS中使用JavaScript/Switch语句

回答

相关问题