你可以在LESS css中做一個javascript for循環嗎？

我正在尋找更少的for循環。是否可以在Less內做到這一點？我知道它有能力評估js，但在這個程度上？你可以在LESS css中做一個javascript for循環嗎？

2011-08-29 Steven Walker

LESS只是一個CSS預編譯器。最終結果是純CSS。我沒有看到Javascript進入它的位置？ –

@Pekka：LESS可以通過Node.js（[more here]（http://lesscss.org/））在瀏覽器和服務器端動態執行。其部分語法確實是評估一個JavaScript表達式，例如（客戶端）：'@height：\'document.body.clientHeight \';' –

@ T.J。啊，你知道什麼！有趣的，謝謝。 –

我會推薦給結帳Twitter Bootsrap。他們正在建設他們的網格系統。他們使用遞歸循環，而不是輸入他們需要的每個類。

有趣的部分是在mixins.less文件，在欠目錄，下面的「//網格」的評論（線516）。有趣的部分是：

#grid { 

    .core (@gridColumnWidth, @gridGutterWidth) { 

     .spanX (@index) when (@index > 0) { 
     (~"[email protected]{index}") { .span(@index); } 
     .spanX(@index - 1); 
     } 
     .spanX (0) {} 

     ... 

     .span (@columns) { 
     width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); 
     } 
...

這是這種方式稱爲grid.less文件中少目錄：

#grid > .core(@gridColumnWidth, @gridGutterWidth);

即產生（除其他事項外）：

.span12 { 
    width: 940px; 
} 
.span11 { 
    width: 860px; 
} 
.span10 { 
    width: 780px; 
} 
...

在bootstrap.css線170

對於@gridColumnWidth，@gridGutterWidth和變量，其餘檢查VAR iables.less文件（行184）

一定要安裝lessc節點編譯器的最新版本。

來源

2012-03-29 16:06:56 AlessMascherpa

謝謝。如果有人無法理解這個/需要更詳細的解釋：http://blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css/ – TheHippo

我只是看Bootstrap中的這個昨天晚上，它吹了我的腦海，然後我不得不在我自己的網格庫中實現它。好棒！ – kalisjoshua

很高興你覺得它有用@kalisjoshua！振作起來總是歡迎:) – AlessMascherpa

沒有什麼關於the docs循環的，但因爲你可以通過反引號訪問JavaScript表達式，你總是可以在你的腳本（而不是更少的代碼定義一個函數，但JavaScript的 —例如，如果在瀏覽器中，你會有一個單獨的script元素），做你的循環，然後訪問它，比如：

@height: `doMyLoop()`

這取決於你想達到與循環什麼。如果你想循環輸出CSS規則，我懷疑你運氣不好。

來源

2011-08-29 05:26:24

我正在嘗試創建一個在24 col網格中創建的循環。基本上，我希望它循環24次並編寫網格類。 .grid_1，.grid_2，...，.grid_24 –

這可以通過AlessMascherpa上面小MODS給出的例子中進行，雖然輸出降壓（10,9,8 ...）對向上（1， 2,3 ...），它只是一個風格的東西。 – augurone

這是一個黑客，但... 添加到您的少的文件。

@testColor: green; 

unusedclass { 
    unknownprop: ~`loopCss(10,".group{{i}} { background-color: @{testColor}; }")` 
}

用下面的函數創建一個JavaScript文件loopCss.js：

function loopCss(count,cssTemplate) { 
    // end the existing unused class 
    var result = "0;}\n"; 
    // Add your custom css 
    for(var i=0; i<count; i++) result += cssTemplate.replace("{{i}}",i) +"\n"; 
    // Handle the close bracket from unused class 
    result += "unusedclass {"; 
    return result; 
}

現在包括loopCss.js您less.js之前，它應該工作。

來源

2012-03-06 22:10:13 matsondawson

你可以在LESS css中做一個javascript for循環嗎？

回答

相關問題