INTRODUCCIÓN
LESS es un preprocesador CSS (Cascading Style Sheet), es decir, creamos un código que al compilarlo nos generará código CSS. Existen otros preprocesadores como SASS, STYLUS o TURBINE, pero el aprendizaje de LESS es más sencillo.
¿Por qué utilizar un preprocesador en vez de escribir código CSS directamente? Pues muy sencillo, porque el código LESS es mucho más estructurado en su escritura y mucho mas fácil de mantener porque permite crear variables, funciones, estructuras de control, bucles, incluir archivos, ...
En definitiva permite crear un código más lógico, organizado y fácil de mantener.
VARIABLES EN LESS
La declaración de variables permite especificar los valores utilizados en un solo lugar y, a continuación, utilizarlos en toda la hoja de estilos, por lo que lo que antes podría ser un cambio en cientos de lineas será solo cambiar una línea de código.
MIXINS EN LESS
Permite incluir todas las propiedades de una clase a otra clase con tan solo incluir el nombre de la clase como una de sus propiedades. Es igual que las variables pero para clases enteras. También puede comportarse como funciones, tomar argumentos como se ve en el ejemplo:
REGLAS ANIDADAS
En lugar de construir nombres de selectores grandes para especificar la herencia permite anidar selectores dentro de selectores. Esto hace que las hojas de estilos sean claras y tengan un estilo corto. Por ejemplo:
FUNCIONES Y OPERACIONES
¿Son algunos elementos de la hoja de estilos proporcionales a otros elementos? Las operaciones te permiten añadir, restar, dividir y multiplicar valores de propiedades y colores, dándote el poder de crear complejas relaciones entre propiedades. Las operaciones no se deben efectuar dentro de paréntesis, a fin de garantizar la compatibilidad con CSS. Funciones de una correspondencia de uno a uno con código JavaScript, lo que permite manipular los valores como quieras.
¿Por qué utilizar un preprocesador en vez de escribir código CSS directamente? Pues muy sencillo, porque el código LESS es mucho más estructurado en su escritura y mucho mas fácil de mantener porque permite crear variables, funciones, estructuras de control, bucles, incluir archivos, ...
En definitiva permite crear un código más lógico, organizado y fácil de mantener.
VARIABLES EN LESS
La declaración de variables permite especificar los valores utilizados en un solo lugar y, a continuación, utilizarlos en toda la hoja de estilos, por lo que lo que antes podría ser un cambio en cientos de lineas será solo cambiar una línea de código.
 |
| 1. Variables en LESS |
Permite incluir todas las propiedades de una clase a otra clase con tan solo incluir el nombre de la clase como una de sus propiedades. Es igual que las variables pero para clases enteras. También puede comportarse como funciones, tomar argumentos como se ve en el ejemplo:
 |
| 2. Mixins en LESS |
En lugar de construir nombres de selectores grandes para especificar la herencia permite anidar selectores dentro de selectores. Esto hace que las hojas de estilos sean claras y tengan un estilo corto. Por ejemplo:
 |
| 3. Reglas anidadas con LESS |
¿Son algunos elementos de la hoja de estilos proporcionales a otros elementos? Las operaciones te permiten añadir, restar, dividir y multiplicar valores de propiedades y colores, dándote el poder de crear complejas relaciones entre propiedades. Las operaciones no se deben efectuar dentro de paréntesis, a fin de garantizar la compatibilidad con CSS. Funciones de una correspondencia de uno a uno con código JavaScript, lo que permite manipular los valores como quieras.
 |
| 4. Funciones y operaciones con LESS |
0 comentarios:
Publicar un comentario