在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語句

回答

相關問題