LESS, o “Leaner CSS” es una gema de Ruby que extiende el lenguaje CSS con elementos propios de otros lenguajes de programación, como variables, herencia, operaciones aritméticas, etc. Algunas de las cosas que nos permite son:

Variables
LESS te permite declarar variables y reutilizarlas dentro de tus hojas de estilo, haciendo cambios globales tan sencillos como modificar una linea.

@color_logo: #F7BD01;
 
#logo { background: @color_logo; }

Elementos anidados (herencia)
Con LESS, en vez de tener selectores largos podemos anidar un selector dentro de otro. De esta forma la herencia queda más clara y tus hojas de estilo más pequeñas.

/* less */
#cabecera {
    background:#222;
    color:#ccc;
    a {
        text-decoration:none;
        font-weight:bold;
    }
}
 
/* css */
#cabecera {
    background:#222;
    color:#ccc;
}
#cabecera a {
    text-decoration:none;
    font-weight:bold;
}

No voy a hablar mucho más de LESS en este articulo. Para ver más características os recomiendo que leais la documentación oficial, donde explican cómo extiende el lenguaje CSS y todo lo que se puede hacer con la librería.

Instalando LESS

Instalar LESS es tan sencillo como instalar cualquier otra gema de Ruby. Basta con abrir una sesión de terminal y ejecutar:

$ sudo gem install less

Integrar LESS con Nanoc

Lo primero que necesitas es un proyecto de nanoc. Si seguiste el anterior articulo ya deberías de tener un proyecto, si no es así, leetelo y empieza a usar esta maravillosa herramienta.

Vete al directorio donde tengas tu proyecto de nanoc y crea un nuevo item. Para mantener las cosas organizadas, los items que sean hojas de estilo los vamos a crear dentro del directorio css.

$ cd code/mi_sitio
$ nanoc3 create_item css/estilos
      create  content/css/estilos.yaml
      create  content/css/estilos.html

Fíjate en que no he escrito la extensión del fichero, y que nanoc ha supuesto automáticamente que quiero crear una página .html. Bueno, no hay forma de decirle que extensión queremos usar, por lo que la única solución es renombrar a posteriori el fichero. Los las hojas de estilo de LESS llevan la extensión .less

$ mv content/css/estilos.html content/css/estilos.less

Ahora tenemos que decir a nanoc como tiene que compilar nuestras hojas de estilo. Para ello tenemos que modificar el fichero Rules de la raíz de nuestro proyecto y añadir lo siguiente al principio del todo.

# Stylesheets
route '/css/*' do
  item.identifier.chop + '.css'
end
 
compile '/css/*' do
  filter :less
end

No entraré en detalles, pero el código que hemos añadido en el fichero le dice a nanoc tres cosas: donde tiene que guardar nuestras hojas de estilo, con que nombre, y qué filtro debe utilizar para ello.

Para comprobar que funciona vamos a crear una hoja de estilo con LESS muy sencilla.

* {
    margin: 0; padding: 0;
    font-family: Georgia, Palatino, Times, 'Times New Roman', sans-serif;
}
 
body {
    background: #fff;
}
 
a {
    text-decoration: none;
    :link, :visited {
        color:#f30;
    }
    :hover {
        color:#f90;
    }
}
 
#main {
    position: absolute;
    top: 40px; left: 280px;
    width: 500px;
 
    h1 {
        font-size: 40px;
        font-weight: normal;
        line-height: 40px;
        letter-spacing: -1px;
    }
    p {
        margin: 20px 0;
        font-size: 15px;
        line-height: 20px;
    }
    ul {
        margin: 20px;
    }
    li {
        list-style-type: square;
        font-size: 15px;
        line-height: 20px;
    }
}
 
#sidebar {
    position: absolute;
    top: 40px; left: 20px;
    width: 200px;
    padding: 20px 20px 0 0;
    border-right: 1px solid #ccc;
    text-align: right;
    h2 {
        text-transform: uppercase;
        font-size: 13px;
        color: #333;
        letter-spacing: 1px;
        line-height: 20px;
    }
    ul {
        list-style-type: none;
        margin: 20px 0;
    }
    li {
        font-size: 14px;
        line-height: 20px;
    }
}

Como puedes ver estamos haciendo uso de los selectores anidados de LESS para dejar la hoja de estilo más limpia.

Para comprobar que los cambios han surtido efecto vamos a arrancar el autocompilador de nanoc. Para ello ejecutamos:

$ nanoc3 aco

Si ahora abrimos un navegador y pedimos la URL http://localhost:3000/css/estilos.css, deberíamos de ver la hoja de estilos procesada con LESS:

* {
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, Times, 'Times New Roman', sans-serif;
}
body { background: #ffffff; }
a { text-decoration: none; }
a:link { color: #ff3300; }
a:visited { color: #ff3300; }
a:hover { color: #ff9900; }
...

Utilizar la nueva hoja de estilo ya procesada es tan fácil como añadir un <link /> a tu fichero de layout. Para ello modificamos el fichero “layouts/default.html”, buscamos la siguiente linea:

<link rel="stylesheet" type="text/css" href="/style.css" media="screen">

y la cambiamos por esta otra:

<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen">

¿Por qué debo yo usar fuentes relativos?

Simple: por usabilidad.

Como diseñadores, tenemos que dar al usuario la posibilidad de usar el tamaño de fuente que ellos quieran. Usando un tamaño de fuente absoluto estamos quitando esta opción a los usuarios, a muchos usuarios (los que usan ese gran amigo de los diseñadores y desarrolladores web).

Cojamos una web cualquiera al azar, como por ejemplo elpais.com.

Ahora ir al menú Ver > Tamaño de fuente > La más grande.

Y podemos ver como el texto no cambia, tiene el mismo tamaño:

Cómo usar fuentes relativas

Para poder usar tamaños relativos de fuente, debemos partir de la base de que casi todos los navegadores tienen un tamaño estándar de 16px. Sabiendo esto sólo tenemos que hacer algo de matemáticas y usar em como unidad para las fuentes.

Por definición, 1em equivale al tamaño de fuente que estemos utilizando (en nuestro caso 16px). Así 2em equivalen a 32px y 0.5em a 8px.

Si queremos que el tamaño de todos los &ld;p /> de nuestra página tengan un tamaño de fuente de 12px, tendremos que usar el siguiente CSS

p { font-size:.75em; }

Calcular el tamaño de todos los elementos puede ser una tarea tediosa (y odiosa). Podemos simplificarlo cambiando el tamaño de fuente del documento a 10px de forma que las conversiones sean más directas (1em = 10px, 1.2em = 12px, …)

html { font-size:62.5%; } /* 10/16 = 0.625. Usamos porcentajes por que hay navegadores que discriminan el tercer decimal */
p { font-size:1.2em; }

Mas allá: unidades relativas para las medidas

Podemos hacer que el layout de la página se adapte al tamaño de fuente del usuario usando unidades relativas para los anchos. Como hemos establecido un tamaño base de 10px la conversión es directa.

Supongamos el siguiente layout:

<div class="container">
	<div class="col1"><h2>lorem ipsum dolor sit amet</h2></div>
	<div class="col2"><h2>consequecter adipliscing elit</h2></div>
	<div style="clear:both;"></div>
</div>

.container { width:300px; margin:0 auto; }
.col1 { float:left; width: 100px; }
.col2 { float:right; width:200px; }
h2 { font-size:2em; }

Si aumentamos el tamaño de la fuente con el navegador, llegará un momento en el que el texto no entre en las columnas y se solapen. Sin embargo, si utilizamos el siguiente CSS

.container {width:30em;}
.col1 {width:10em;}
.col2 {width:20em;}

Al aumentar el tamaño de la fuente, aumentará de forma proporcional el ancho de las columnas, por lo que nunca se llegará a solapar el texto de una sobre el de otra.

Hasta su versión 7, Internet Explorer no soporta el uso de PNGs transparentes de modo nativo. Sin embargo es posible usar un PNG transparente en nuestras hojas de estilos usando un filtro propietario. Nos interesa que dicho filtro solo lo interprete Internet Explorer 6 e inferiores, por lo que tendremos que utilizar comentarios condicionales o algún otro método para filtrar CSS. (Yo personalmente uso el Tan hack)

.capa-con-png {
	background:url('../img/transparente.png');
}
* html .capa-con-png {
	background-image: none; /* Sin esto no veríamos la imagen cargada con el filtro */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/transparente.png', sizingMethod='scale');
}

A tener en cuenta

Es más que posible que en nuestro sitio la estructura de carpetas sea similar a la de la imagen, y que en nuestra hoja de estilos estemos poniendo las rutas relativas como en el ejemplo de arriba. Es importante saber que en el filtro las rutas no se tienen en cuenta desde el CSS, sino desde la página en la que estemos. Para ahorrarnos problemas es mejor usar rutas absolutas (siempre que tengamos posibilidad).

Las imagenes cargadas con el filtro no aceptan las propiedades background-position y background-repeat. Siempre se posicionarán en la esquina superior izquierda y se repetirán una única vez.

Dentro del filtro, la propiedad sizingMethod acepta dos valores:

• image: pondrá la imagen a su tamaño. Si tenemos un PNG de 1×1 pixels, lo mostrará a 1×1.
• scale: redimesiona la imagen al tamaño de la caja en la que estamos aplicando el filtro. Si tenemos un png de 100×100 pixels puesto en una caja que mide 200×400 px, lo reescalará hasta ocupar toda la página