LESS: lenguaje de hojas de estilo dinámico

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

LESS pretende ser una herramienta para dotar al lenguaje de hojas de estilo CSS de un comportamiento dinámico a través de variables, mixins, operaciones y funciones. Funciona tanto en el lado del cliente (IE 6 +, WebKit, Firefox) y del lado del servidor, con Node.js.

Para comenzar a utilizar LESS tendremos que elegir la forma que tenemos para compilar las plantillas, ya que no es lo mismo utilizar un servidor web basado en Node.js o servir nuestras hojas de estilo CSS a través de un script en cualquier lenguaje.

Funcionamiento lado del cliente

Enlazamos a nuestra hoja de estilos .less con el rel establecido en “stylesheet/less”

<link rel="stylesheet/less" type="text/css" href="styles.less">

A continuación, descargamos el fichero less.js desde la parte superior de la página, y lo incluimos en la cabecera <head>:

<script src="less.js" type="text/javascript"></script>

Es muy importante incluir primero las hojas de estilo.

Funcionamiento lado del servidor

La forma más fácil de instalar LESS en el servidor, es a través de la npm, el gestor de paquetes, de la siguiente forma:

$ npm install less

Con esto obtendremos la última versión estable.

$ npm install less@latest

Variables

Las variables nos permiten especificar en un solo lugar un valor que utilizaremos a lo largo de la hoja de estilo. De esta forma si deseamos cambiar un color dentro de nuestro código tendremos que cambiarlo solo en un lugar de nuestro archivo CSS.

// LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
/* Compiled CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins

Mixins nos permiten embeber todas las propiedades de una clase dentro de otra clase simplemente incluyendo el nombre de la misma como una de sus propiedades. Es igual que las variables, pero para las clases de conjunto.

// LESS

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
/* Compiled CSS */
#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Reglas Anidadas

En LESS no es necesario que escribamos largos selectores para especificar la herencia de nuestras reglas. Utilizaremos selectores anidados dentro de otros selectores. Esto hace de las hojas de la herencia algo limpio y con estilo.

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}
/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Funciones y operaciones

LESS permite realizar operaciones de: sumar, restar, dividir y multiplicar valores de las propiedades y colores, gracias a estopodrás crear complejas relaciones entre las propiedades. También se pueden evaluar expresiones JavaScript dentro de los archivos .less, lo que le permite manipular los valores de la forma que desees.

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}
/* Compiled CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

Sé la primera persona en comentar

Deja un comentario

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

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.