Xitrus está alojado en:
Como ya vimos en la introducción que hice sobre LESS con este pre-revisor de CSS podemos usar variables y anidar estilos unos dentro de los otros.
En este artículo voy a extender el uso del anidamiento de estilos y el uso de Mixins, que nos permiten mezclar estilos distintos (como si llamásemos a una función con JavaScript y nos devolvieran el estilo).
- /* LESS */
- @link:#333;
-
- a {
- color:@link;
- text-decoration:none;
- &:hover {
- color:#777;
- text-decoration:underline;
- }
- }
-
- /* CSS */
- a {
- color:#333;
- text-decoration:none;
- }
- a:hover {
- color:#777;
- text-decoration:underline;
- }
En el ejemplo anterior vemos como además de anidar clases, elementos e IDs también podemos anidar pseudoclases, como son :hover, :nth-child() y muchas otras más.
La forma de hacerlo es muy fácil, solo debemos de usar el símbolo "&" para hacer referencia a que le vamos a aplicar la pseudoclase y en su interior poner el contenido necesario.
El término Mixin significa en este caso usar una clase (o estilo) en otra, es decir, podemos tener una clase llamada .verde (con el color de fondo verde) y la añadimos tal cual dentro de un estilo cualquiera, ahora lo veréis.
Con esto se pueden crear varias cosas, como mezclar varias clases en una para ahorrarnos escribir ciertas cosas muchas veces y otra cosa que podemos hacer y es muy productiva es usar funciones (similares a la de JavaScript), que les podemos pasar argumentos.
- /* LESS */
- .borde {
- border:1px solid #fff;
- border-radius:10px;
- }
- .texto-sombra {
- color:#999;
- text-shadow:1px 1px 0px #000;
- }
- .cuadro { /* En este estilo añadiremos las dos anteriores */
- .borde;
- .texto-sombra;
- }
-
- /* CSS */
- .cuadro {
- border:1px solid #fff;
- border-radius:10px;
- color:#999;
- text-shadow:1px 1px 0px #000;
- }
Esto puede sernos de gran ayuda cuando queremos aplicar varias cosas iguales en muchas clases de forma cómoda, pero como antes he dicho también podemos pasar argumentos, como si de una función de JavaScript se tratase.
- /* LESS */
- .borde (@color:#fff,@radio:10px) {
- border:1px solid @color;
- border-radius:@radio;
- }
- .cuadro { /* En este estilo añadiremos los valores por defecto */
- .borde;
- }
- .cuadro-grande { /* En este estilo añadiremos valores personalizados */
- .borde(#999,20px);
- }
-
- /* CSS */
- .cuadro {
- border:1px solid #fff;
- border-radius:10px;
- }
-
- .cuadro {
- border:1px solid #999;
- border-radius:20px;
- }
Para pasar los argumentos, como vemos en el ejemplo hay que poner entre paréntesis las variables y hay que establecer también un valor por defectos por si no pasamos ninguna variable.
Y para llamarla exactamente igual que JavaScript, ponemos el nombre de la clase seguido de un paréntesis con las variables separadas con comas.
Como hemos podido comprobar estas ventajas que tiene LESS sobre CSS nos pueden ahorrar muchísimo tiempo y nos evitan hacernos escribir lo mismo repetidas veces, que nos asegura además que no cometeremos errores accidentales.
Si queréis revisar el código LESS podéis hacerlo con alguna de las formas que expliqué en el artículo anterior, yo os recomiendo para ver los ejemplos hacerlo con el revisor online.
Xitrus está alojado en:
