12
Estoy buscando hacer un bucle for dentro de Less. ¿Es posible hacer esto dentro de Less? Sé que tiene la capacidad de evaluar js pero a este grado?¿Puedes hacer un javascript para el bucle dentro de LESS css?
A
Respuesta
24
Recomendaré obtener el pedido Twitter Bootsrap. Están construyendo su sistema de grillas de esa manera. Se repiten, con recursividad, en un mixin menos, en lugar de escribir cada clase que necesitan.
La parte interesante está en el archivo mixins.less, en el directorio menos, debajo del comentario "// The Grid" (línea 516). La parte interesante es:
#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));
}
...
cual se le llama en el archivo grid.less en menos directorio de esta manera:
#grid > .core(@gridColumnWidth, @gridGutterWidth);
que producen (entre otras cosas):
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
...
en bootstrap.css línea 170.
Para @gridColumnWidth, @gridGutterWidth y el resto de variables check var archivo iables.less (línea 184)
Asegúrese de tener instalada la última versión del compilador de nodo lessc.
+4
Gracias por eso. Si alguien tiene problemas para entender esto/necesita una explicación más detallada: http://blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css/ – TheHippo
+0
Acabo de ver esto en Bootstrap anoche y me voló la mente y luego tuve que implementarlo en mi propia biblioteca de cuadrícula. ¡Tan genial! – kalisjoshua
+1
¡Me alegra que lo encuentre útil @kalisjoshua! Anímate siempre es bienvenido :) – AlessMascherpa
2
No hay nada acerca de los bucles en the docs, pero ya que se puede acceder de JavaScript expresiones a través de acentos abiertos, siempre se puede definir una función en el script (no el código de menos, pero JavaScript — por ejemplo, si en un navegador, que había script tener un elemento separado) que hace el bucle y luego acceder a ella, por ejemplo:
@height: `doMyLoop()`
depende de lo que estamos tratando de lograr con el bucle. Si desea que el ciclo genere reglas CSS, sospecho que no tiene suerte.
+1
Estoy intentando crear un bucle que se crea en una cuadrícula de 24 columnas. Básicamente, quiero que pase 24 veces y escriba las clases de la grilla. .grid_1, .grid_2, ...., .grid_24 –
+0
Esto se puede hacer con el ejemplo dado por AlessMascherpa arriba con pequeños mods, aunque la salida baja (10,9,8 ...) vs. arriba (1, 2,3 ...), funciona solo como algo estilístico. – augurone
1
Esto es un hack pero ... Agregue esto a su archivo menos.
@testColor: green;
unusedclass {
unknownprop: ~`loopCss(10,".group{{i}} { background-color: @{testColor}; }")`
}
Crear un archivo JavaScript loopCss.js con la siguiente función:
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;
}
ahora incluyen los loopCss.js ante sus less.js y debería funcionar.
Cuestiones relacionadas
- 1. CSS Gradients - Less Mixins
- 2. CSS - LESS class inheritance
- 3. proceso asíncrono dentro de un bucle Javascript para
- 4. ¿Puedes hacer desarrollo de escritorio usando JavaScript?
- 5. ¿Puedes 'salir' de un bucle en PHP?
- 6. ¿Es posible hacer matemáticas dentro de CSS?
- 7. Declarar var dentro de Javascript para la declaración de bucle
- 8. ¿Puedes hacer "un borde invisible"?
- 9. ¿Propiedades de CSS dinámico en LESS?
- 10. ¿Cómo configuro el resaltado de sintaxis para LESS en coda?
- 11. Asynchronicity dentro de un bucle
- 12. CSS: Administrar imágenes de Sprite con .Less
- 13. ¿Cuál es la sintaxis `& ::` en LESS CSS?
- 14. css/less editor que muestra los colores
- 15. javascript salir para el bucle sin regresar
- 16. ¿Más rápido para declarar variables dentro de un bucle o fuera de un bucle?
- 17. Usar CSS para hacer un intervalo no hacer clic
- 18. ¿Puedes hacer un objeto en Javascript que NO herede de Object?
- 19. No realice funciones dentro de un bucle
- 20. Declaración de variables dentro de un bucle
- 21. C# foreach dentro de un bucle Foreach
- 22. UIWebView: ¿Puedes desactivar Javascript?
- 23. Contador dentro de xsl: para cada bucle
- 24. Hacer una presentación de diapositivas en bucle sin JavaScript jQuery
- 25. Cómo reparar el error jslint 'No hacer funciones dentro de un bucle'?
- 26. cambiar el índice de bucle dentro del bucle
- 27. En Javascript, ¿puedes extender el DOM?
- 28. En cuanto JavaScript para voodoo() bucle
- 29. cómo configurar el contador de bucle dentro del bucle correctamente dentro de jmeter?
- 30. Creación lambda dentro de un bucle
LESS es simplemente un precompilador de CSS. El resultado final es simple CSS. No veo a dónde entra Javascript? –
@Pekka: LESS se puede ejecutar dinámicamente, tanto en el lado del cliente en el navegador como en el lado del servidor a través de Node.js ([más aquí] (http://lesscss.org/)). Parte de su sintaxis es, de hecho, evaluar una expresión de JavaScript, por ejemplo (del lado del cliente): '@height: \' document.body.clientHeight \ ';' –
@ T.J. ah, ¿qué sabes? Interesante, gracias. –