Less, programando hojas de estilo

logo-lessMas de una vez nos hemos percatado del código duplicado que tenemos en nuestra hoja de estilo para ciertas clases, lo cual lo convierte en algo muy tedioso ya que cuando queremos hacer un cambios es muy complicado (mas en una hoja de estilos grande). a continuación mostrare las ventajas de less y como resuelve nuestro problemas cotidianos.

Problemas al manejar CSS

  • En ocasiones manejamos un color ya sea de borde, fuente o de fondo, esto implica colocar el código #hexadecimal en múltiples clases, ¿pero que pasa si queremos cambiar este color por alguno otro? no podemos hacer un buscar y reemplazar por que es probable que ese color lo usemos en otras secciones que no deseamos cambiar.
  • Tomando el punto anterior también pasa lo mismo con las propiedades de fuentes, anchos, float (como se extrañan las variables 🙁 ).
  • El tener que repetir código para redondear ciertas esquinas de un elemento.  ¿No se seria mas fácil con una función :)?
  • Que pasa cuando movemos de lugar alguna imagen o la queremos que cambiar por otra, que flojera estar actualizando todas las rutas en las que aparece, a un que con un buscar y reemplazar se puede solucionar, ¿pero si manejamos imports :(?

Pues bien Less viene a solucionar estor y otros problemas ya que nos permite hacer uso de variables, funciones, operaciones matematicas, Mixins entre otras, miremos unos ejempos:

Variables

Las variables nos permiten definir en un solo lugar un valor que será usado en múltiples sitios de nuestro código CSS. Esto nos permite reutilizar las variables y en caso de cambiar por ejemplo un color corporativo, tendremos que cambiarlo solo en un lugar de nuestro archivo CSS. Las variables nos permiten aplicar el principio DRY (Dont Repeat Yourself).

// LESS
@color: #a8b317;
a {
    color: @color;
}
h2 {
    color: @color;
}

Resultado en css:

// CSS
a {
    color: #a8b317;
}
h2 {
    color: #a8b317;
}

Se pueden utilizar operaciones, por lo tanto podemos sumar, restar, multiplicar y dividir variables:

@minWidth: 20%;
@columnLeft: @minWidth * 2;
@columnRight: @columnLeft + @minWidth;
@color: #4a785b;
.sideLeft {
    background-color: @color + #111;
    width: @columnLeft;
}
.sideRight {
    background-color: @color;
    width: @columnRight;
}

LESS entiende la diferencia entre un color o una unidad al realizar operaciones, lo cual es una pasada.
El código anterior daría como resultado al compilarse:

@minWidth: 20%;
@columnLeft: @minWidth * 2;
@columnRight: @columnLeft + @minWidth;
@color: #4a785b;
.sideLeft {
    background-color: @color + #111;
    width: @columnLeft;
}
.sideRight {
    background-color: @color;
    width: @columnRight;
}

Mixins

Los Mixins te permiten embeber todas las propiedades de una clase dentro de otra clase simplemente incluyendo el nombre de la misma como una de sus propiedades.

.round-corners (@radius: 5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}
#header {
    .round-corners;
}
#post {
    .round-corners(16px);
}

El codigo anteriores daría como resultado el siguiente código CSS:

#header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#post {
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
}

Cuando un mixin recibe más de un parámetro y no queremos escribirlos todos, podemos utilizar la variable especial @arguments

.shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}
.shadow(1px, 2px);

Reglas Anidadas

Cuando programamos en LESS no es necesario que escribamos largos selectores para especificar la herencia de nuestras reglas. Podemos usar selectores anidados dentro de otros selectores. Esto convierte a la herencia en algo limpio y elegante.

#record {
    h1 {
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 2em;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                color: red;
            }
        }
    }

Este código daría como resultado al compilarse:

#record  h1{
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 2em;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    color: red;
}

La sintaxis de LESS es mucho más clara y elegante que el uso de selectores naturales de CSS.

Funciones de Color

LESS nos ofrece una variedad de funciones para transformar colores. Primero son transformados a HSL y después son manipulados a nivel de canal.

lighten(@color, 10%); // devuelve un color un 10% mas "claro" que @color
darken(@color, 10%); // devuelve un color un 10% mas "oscuro" que @color
saturate(@color, 10%); // devuelve un color un 10% "más" saturado que @color
desaturate(@color, 10%); // devuelve un color un 10% "menos" saturado que @color
fadein(@color, 10%); // devuelve un color un 10% "menos" transparente que @color
fadeout(@color, 10%); // devuelve un color un 10% "más" transparente que @color
spin(@color, 10); // devuelve un color con 10 grados de tono mayor que @color
spin(@color, -10); // devuelve un color con 10 grados de tono menor que @color

Tambien podemos extraer información de un color:

hue(@color); // devuelve el canal `hue` de @color
saturation(@color); // devuelve el canal `saturation` de @color
lightness(@color); // devuelve el canal `lightness` de @color

Espacios de nombres

En ocasiones necesitamos agrupar nuestras variables y mixins para organizarlos mejor, para ofrecer algún tipo de encapsulación o para redistribuirlos. Sea cual fuere nuestra necesidad, LESS nos ofrece una forma sencilla de utilizar espacios de nombres en nuestras plantillas.

#main_header {
    .logo () {
        display: block;
        border: none;
        background: transparent url(../media/logo.png) 0 0 scroll;        
    }
    .slogan { ... }
    .menu { ... }
    ...
}

Usar el nuevo espacio de nombres es igualmente sencillo. Si queremos utilizar la clase .logo en nuestro #header podemos hacerlo de la siguiente forma:

#header a {
    color: green;
    #main_header > .logo;
}

Alcance de Variables (Scope)

El alcance o ámbito de variables en LESS es muy parecido al alcance en otros lenguajes. Primero se busca localmente, si no se encuentra, el compilador busca en el ámbito inmediatamente superior y así sucesivamente.

@var: #333;
#page {
    @var: #fff;
    #header {
        color: @var; // #fff
    }
}
#footer {
    color: @var; // #333
}

Importación

En LESS podemos importar archivos y disponer de todas las variables y mixins que definan de forma automática. La extensión .less es opcional. Para importar un archivo usamos la regla @import. También podemos importar archivos CSS que no serán procesados por el compilador.

@import "form.less";
@import "tablas.less";
@import "footer.less";
@import "elementos.less";

Interpolación de cadenas

El valor de las variables puede ser empotrado dentro de cadenas parecido a como se hace en Bash o Ruby pero usando el constructor @{nombe}:

@url: "http://www.soyprogramador.liz.mx";
background-image: url("@{url}/images/background.png");

Ignorar Elementos

A veces querremos ignorar CSS que no es CSS válido o que pertenece a una sintaxis especial propietaria no disponible en el estándar y que LESS no entiende. En esos casos podemos ignorar partes del archivo utilizando el caracter ~:

.transparente {
    filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')";
}

Toda la definición será ignorada por el compilador de LESS que no la tendrá en cuenta y será añadida al archivo CSS resultante sin cambios.

Descargar LESS

govani

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *