Sto cercando di fare un ciclo for all'interno di Less. È possibile farlo all'interno di Less? So che ha la capacità di valutare js ma fino a questo punto?Puoi fare un javascript per loop all'interno di LESS css?
Consiglierò di effettuare il checkout Twitter Bootsrap. Stanno costruendo il loro sistema di rete in questo modo. Si collegano, con ricorsione, in un mixin meno, invece di digitare ogni classe di cui hanno bisogno.
La parte interessante è nel file mixins.less, nella directory meno, sotto il commento "// Grid" (riga 516). La parte interessante è:
#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));
}
...
che è chiamato nel file di grid.less in meno di directory questo modo:
#grid > .core(@gridColumnWidth, @gridGutterWidth);
che producono (tra le altre cose):
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
...
in bootstrap.css riga 170.
Per @gridColumnWidth, @gridGutterWidth e il resto delle variabili controllare var file iables.less (riga 184)
Assicurarsi di avere installata l'ultima versione di lessc node compiler.
Grazie per quello. Se qualcuno ha difficoltà a capire questo/ha bisogno di una spiegazione più dettagliata: http://blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css/ – TheHippo
Ho appena visto questo in Bootstrap la scorsa notte mi è venuta in mente e poi ho dovuto implementarla nella mia griglia personale. Così impressionante! – kalisjoshua
Felice di trovarlo utile @kalisjoshua! Alleggerire è sempre il benvenuto :) – AlessMascherpa
Non c'è niente di loop in the docs, ma dal momento che è possibile accedere a JavaScript espressioni via backticks, si può sempre definire una funzione nello script (non il codice di meno, ma JavaScript — ad esempio, se in un browser, devi avere un script elemento separato) che fa il ciclo e quindi accedervi, ad esempio:
@height: `doMyLoop()`
dipende da quello che si sta cercando di raggiungere con il loop. Se vuoi che il loop elabori le regole CSS, sospetto che tu non abbia fortuna.
Sto provando a creare un ciclo che crea a 24 colonne. Fondamentalmente, voglio farlo scorrere 24 volte e scrivere le classi della griglia. .grid_1, .grid_2, ...., .grid_24 –
Questo può essere fatto con l'esempio dato da AlessMascherpa sopra con piccole mod, sebbene l'output passi in basso (10,9,8 ...) contro su (1, 2,3 ...), funziona solo una cosa stilistica. – augurone
Questo è un trucco ma ... Aggiungi questo al tuo file meno.
@testColor: green;
unusedclass {
unknownprop: ~`loopCss(10,".group{{i}} { background-color: @{testColor}; }")`
}
Creare un javascript loopCss.js di file con la seguente funzione:
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;
}
includono ora le loopCss.js prima che i vostri less.js e dovrebbe funzionare.
LESS è semplicemente un precompilatore CSS. Il risultato finale è semplice CSS. Non vedo dove viene il Javascript? –
@Pekka: LESS può eseguire dinamicamente, sia lato client nel browser e lato server tramite Node.js ([più qui] (http://lesscss.org/)). Parte della sua sintassi è infatti quella di valutare un'espressione JavaScript, ad esempio (lato client): '@height: \' document.body.clientHeight \ ';' –
@ T.J. ah, cosa sai! Interessante, grazie. –