Programación Web

Consejos para comenzar el desarrollo web en Less (CSS)

Durante los últimos años han proliferado nuevas formas de escribir código web, lo que acelera el proceso de desarrollo en distintos lenguajes de programación. En la actualidad existen preprocesadores para Javascript (CoffeScript) y HTML (HAML) como ejemplos más notorios. Para CSS también han aparecido varios preprocesadores que ofrecen funcionalidad extra y agilizan el desarrollo. Dentro de este grupo los más destacados son SASS y LESS, algo que habíamos mencionado en nuestro artículo sobre tendencias de desarrollo web para este 2014.

En esta oportunidad te entregamos consejos para iniciarte en la segunda de estas herramientas. Less es un preprocesador de CSS, lo que significa que extiende este lenguaje añadiendo más y mejores capacidades: variables, mixins, funciones y varias otras técnicas que permiten que el código final sea más mantenible y extensible.

Por ejemplo:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Se compila en:

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Uso en el navegador

Para que puedas usar Less debes trabajar en un archivo con extensión .less, a diferencia de .css como lo harías normalmente. Lo incluyes de la siguiente manera en tu html:

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

Una vez incluido el archivo es necesario incluir la librería Less.js, que se encarga de parsear y compilar tu código para hacerlo legible al navegador. Para hacerlo descarga esta librería desde el sitio oficial de Less y coloca el archivo javascript inmediatamente después de tu archivo .less de la siguiente manera:

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

Existen varias configuraciones disponibles para usar durante el desarrollo con less. Para hacerlas efectivas debes incluirlas de manera previa al archivo less.js de esta forma:

<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

Primeros pasos

Variables

Las variables en Less funcionan de la misma manera que en cualquier otro lenguaje, como Javascript o php. Para inicializarlas debes escribir su nombre precedido con un arroba (@) y luego el valor que asignarás:

@nice-blue: #5B83AD;

También puedes hacer operaciones matemáticas dentro de ellas:

@light-blue: @nice-blue + #111;

Para usarlas debes colocarlas donde antes iba el valor:

#header {
  color: @light-blue;
}

Lo que finalmente se compila en:

#header {
  color: #6c94be;
}

Es importante mencionar que las variables son “constantes”: solo pueden definirse una vez.

Mixins

Tal como lo dice su nombre en inglés, existen para mezclar un set de reglas con otro, para así ahorrar tiempo de desarrollo.

Por ejemplo:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Si quieres usar estas propiedades dentro de otro set de reglas, entonces lo haces de esta forma:

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

Lo que dará este resultado:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Reglas anidadas

Less ofrece la posibilidad de usar reglas anidadas que reemplazan o combinan con reglas en cascada tradicionales.

Por ejemplo, si tienes el siguiente CSS:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

En Less puedes escribir lo mismo de la siguiente forma:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

También puedes usar pseudo-clases y pseudo-elementos añadiendo el operador “&” que representa un agregado al selector actual. Aquí es donde encuentras el clásico .clearfix escrito en less.

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

Operaciones

En Less, cualquier color, número o variable puede usarse para hacer operaciones.

Un ejemplo de esto es:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

Si usas una unidad dentro de una operación esta no sufre cambios excepto en su valor.

@var: 1px + 5;

Se convierte en 6px.

Funciones

Less ofrece una variedad de funciones auxiliares que te ayudarán en distintos aspectos: transformaciones de color, de unidad, matemáticas, entre otras.

Estas funciones están hechas para extender la funcionalidad del lenguaje y facilitan el desarrollo de las aplicaciones.

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(0.5); // devuelve `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Importando

Puedes importar tanto archivos .less como .css si lo deseas. En el caso de un .css este será tratado como un css y no ejecutará less. Si tu archivo tiene cualquier otra extensión será tratado y compilado como si tuviera la extensión .less.

@import "library";
@import "typo.css";

Mezclando propiedades

La capacidad de mezclar propiedades en Less se usa para generar reglas con valores separados por comas, como box-shadow o background. Para esto debes generar un Mixin en donde escribes un “+” antes del valor que quieres mezclar:

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

Se compila en:

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

Utilidades

Loops para crear grilla responsive

En Less un mixin puede llamarse a sí mismo generando un loop, lo que te da la capacidad de hacer Mixins recursivos que hacen sentido a la hora de escribir reglas en serie, como lo son las grillas css.

Un ejemplo de grilla en Less es:

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

.generate-columns(4);

Lo que haces es definir un Mixin llamado “generate-columns” que acepta 2 argumentos (@n y @i),  donde el segundo argumento tiene el valor por defecto “1”. Dentro del Mixin verás la condición “when” que en términos simples te dirá que lo que sigue sólo se ejecutará si la condición que la antecede se cumple. En este caso esta condición sería “@i =< @n”, vale decir, mientras @i sea menor o igual a @n nuestro mixin se seguirá ejecutando. Antes de terminar el Mixin este se vuelve a llamar a sí mismo, con la diferencia de que ahora se pasa el valor (@i + 1). Por último ejecutamos .generate-columns pasando como primer argumento “4” lo que nos devolverá el siguiente resultado:

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

Traspasar píxeles a ems

Otro ejemplo de cómo puedes usar Less para facilitar tu desarrollo front, es calculando y traspasando automáticamente los tamaños en píxeles a ems:

@baseSize: 14px;

body{
	font-size: @baseSize;
}

.ems-calc(@size) {
   font-size: (@size / @baseSize) + 0em;
}

p{
.ems-calc(18px);
}

En el ejemplo anterior defines una variable @baseSize que será igual al tamaño en pixeles base del documento. Luego generas un Mixin llamado “ems-calc”, que recibe como parámetro el tamaño en pixeles de la fuente y automáticamente compila en ems de la siguiente forma:

p{
font-size: 1.285714285714286 em //Equivalente a 18px si el font-size del body es igual a 14px
}