Preprocesadores CSS: LESS

Introducción al preprocesador LESS por Daniel Rodríguez

miro

archivado en: HTML/CSS / 11 septiembre, 2014

Mi amigo Daniel Rodríguez me envía un tutorial sobre preprocesadores muy bueno que acaba de preparar y tal cual lo publico aquí.

Detalles de cada uno:

LESS SASS
  • Mejor prestaciones para sitios webs
  • Nomenclatura más sencilla (más similar a CSS)
  • Curva de aprendizaje menor
  • Pocas dependencias
  • Funciona bajo Javascript
  • http://lesscss.org/
  • Mejor prestaciones para aplicaciones webs
  • Mucho más potente
  • Ideal para grandes hojas de estilo
  • Mejor compilación
  • Funciona bajo Ruby

LESS

 Empezando

Hay 2 formas de utilizar Less.

Una de ellas es usarlo en la parte del cliente, es decir, bajarnos la librería y guardala en un fichero .js para añadirlo al HEAD de nuestra web (como cualquier otra libería, vamos). Aquí tenemos todas las versiones que van saliendo (para no dejar anticuado el enlace), cogeremos la última.

Por otro lado necesitaríamos un compilador para pasar los archivos .less a .css (los css no habrá que editarlos en ningún momento, ya que esto lo haremos en el .less), como viene siendo SimpLESS.

Creamos un index.html con el típico esqueleto pero con las referencias al less y al js:

<!DOCTYPE HTML>

<html>

<head>

<title>Tutorial Less</title>

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

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

</head>

<body>

<h1>Hola mundo H1</h1>

</body>

</html>

Creamos nuestro archivo estilos.less en una carpeta que llamaremos less.

Lo abrimos con nuestro amado Sublime Text (podemos hacer ctrl + shift + P e indicar que lo lea como un css o bajarnos los snipets de Less) e introducimos esto:

@h1-color:orange;

h1{

color: @h1-color;

}

Abrimos nuestro navegador y...

CUIDADO

Para esta primera forma no utilizar Chrome, usar otro navegador como Firefox u Opera. Si queremos si o si trabajar con Chrome no nos quedaría más remedio que utilizar un servidor (Wamp, Xampp, etc).

Más info.

... si vemos nuestro texto en naranja es que todo está ok.

Obviamente ahora estamos haciendo pruebas, pero no vamos a subir a nuestro servidor el .js ni el .less para darle más carga a él ni a nuestros usuarios. También, que por mucho que sea un compilador en tiempo real necesita javascript para trabajar y puede ser que nos visite alguien en nuestra web y que lo tenga desactivado, dando lugar a una web sin estilo alguno.

Tendremos que subirlo compilado ya a css. Para ello vamos a la carpeta ya descomprimida de nuestro compilador SimpLESS.

Vemos nada más abrirlo un "Drag & Drop" que nos tienta a empezar a soltarle cosas encima como si no hubiera un mañana, así que cumpliendo su deseo arrastramos la carpeta less, en la cual tenemos nuestro estilos.less.

Ahora nos aparecen 2 líneas: una con ruta/estilos.less y ruta/estilos.css. En la primera nos avisa que nunca ha compilado ese archivo, por lo tanto pinchamos en el reload de arriba, junto a nuestro nombre de archivo.

Si nos vamos a la carpeta vemos que ahora existe un estilos.css (Bieeeen).

Podemos seguir compilando este archivo mientra lo vamos editando en el .less.

Cuando ya tuviéramos nuestra hojas de estilos listas la compilaríamos y subiríamos como css a nuestro servidor haciendo referencia, claro esta, en el HEAD a un .css y no a un .less.

Esta sería la primera forma de utilizar Less. La segunda pasamos de utilizar Less en la parte del cliente a utilizarlo en el servidor. Para ellos echamos mano de Node.js y con una sóla línea ya tendremos Less totalmente montado y funcionando:

$ npm install -g less

Más fácil, ¿verdad?

Ahora vamos a la carpeta donde está nuestro estilos.less con un "cd ruta" de toda la vida en nuestra consola y le podríamos pasar otra línea para compilar:

$ lessc estilos.less > estilos.css

El resto de configuración la podemos encontrar en la web de Less.

Por ahora, la configuración nos va a importar bien poco, ya que el enfoque del tutorial va hacia el código de Less. Con tener claro hasta el punto de compilar el css con Node nos basta.

Sabiendo ya esto podemos empezar con el código.

VARIABLES

A la hora de añadir el código al archivo .less que creamos vimos esta línea:

@h1-color:orange;

Esto son las variables en Less, precedidas con @ siempre.

Podemos declarar tantas variables como se nos antojen para especificarlas dentro de las propiedades de css.

Esto es una ventaja bestial sobre css. Imaginaos que tenemos una web con un estilo de color predominantemente verde y que en muchas clases tenemos un color:#43d55b; que se repite a más no poder.

.campos{

color: #43d55b;

}

.caja{

color: #43d55b;

}

.etiquetas{

color: #43d55b;

}

.ornitorrincos{

color: #43d55b;

}

Ahora llega el día en que lo queremos cambiar a #20b939, pero no en todas las clases, sólo en algunas. Con esto echamos por tierra el buscar y reemplazar, ya que quitaríamos todas.

Con Less lo solucionaríamos así:

@color-verdeClaro: #43d55b;

@color-verdeOscuro: #20b939;

.campos{

color: @color-verdeClaro;

}

.caja{

color: @color-verdeClaro;

}

.etiquetas{

color: @color-verdeOscuro;

}

.ornitorrincos{

color: @color-verdeOscuro;

}

Ahora siempre que tengamos que modificar de nuevo esos colores sólo tendremos que modificar las variables.

Imaginemos un css con cientos de clases con la misma propiedad y entenderemos mejor esta mejora.

También podemos realizar operaciones con estas variables. El mejor ejemplo que se me ocurre en este momento es una caja, a la cual queremos dotar de un color de fondo y de un borde con un color similar al fondo pero más oscuro.

@caja_bg: green;

@caja_bor: #187723;

#caja{

background-color: @caja_bg;

border: 5px solid @caja_bor;

width: 100px;

height: 100px;

}

Podríamos poner un color de fondo en una variable y en el color del borde otra, cierto, pero podemos sacar el segundo color de forma dinámica así:

@caja_bg: green;

#caja{

background-color: @caja_bg;

border: 5px solid @caja_bg - #444;

width: 100px;

height: 100px;

}

Si aumentamos los números daremos más oscuridad al color (#555 sería algo más oscuro), así que podemos jugar con los tonos como queramos. Una vez teniendo esto configurado de esta forma sólo tendríamos que cambiar la variable con el valor green a que gustemos (red, blue, yellow...) y también lo hará el borde a un tono más oscuro.

MIXINS

Los mixins no son más que funciones, pero decir "mixins" es más hipster.

Empecemos dibujando una lista en nuestro html:

<ul>

<li>Uno</li>

<li>Dos</li>

<li>Tres</li>

</ul>

Vamos a darle propiedades de css mediante una función en nuestra hoja de estilo:

.listas(){

list-style: none;

font-size: 18px;

font-weight: bold;

}

Ya tenemos nuestra función creada, aunque aun no está llamada en ningún sitio. Vamos a ello:

ul{

.listas();

}

Tan sencillo como eso, no hay más. Ahora comprobemos nuestra web. Coge los estilos perfectamente.

También podríamos poner funciones con valores por defecto:

.border_NAV (@default:5px){

border-radius: @default;

-moz-border-radius: @default;

-webkit-border-radius: @default;

-o-border-radius: @default;

}

li{

border:1px solid #000;

.border_NAV();

}

Aquí habríamos creado una función para añadir los border radius de todos los navegadores sin repetir las 4 líneas por cada clase o capa con border radius que queramos, todas ellas con un borde por defecto de 5px.

El que tenga un valor por defecto no quiere decir que no podamos darle otro. Si a esa función la llamamos con .border_NAV() cogerá el valor por defecto, pero si lo hacemos con .border_NAV(12px), los 5px se verán reemplazados por los 12. Los 5px sólo funcionan en el caso de no haber nada especificado.

Veamos otro ejemplo más práctico.

Uno de los muchos problemas entre los distintos tipos de navegadores puede ser el tamaño de la letra, que no suele verse igual en todos, y más si estamos hablando de sitos responsive.

La mejor medida para trabajar esto son las unidades rem (saber más). Nada de px, cm e incluso em com mediaqueries... lo más correcto es esta unidad, ya que rem, a diferencia de los em, no funciona en relación a su contenedor, si no al tamaño definido en la raíz, en el BODY.

Para verlo más claro: tenemos un BODY con 12px y queremos los h2 con 18px, pues entonces haríamos 18/12 = 1,5 que se traduciría a:

h2{

font-size: 1.5rem;

}

Este tamaño de letra es el idóneo en css, pero como siempre, Internet Explorer da la lata, ya que en versiones anteriores a la 9 no funcionan las unidades rem.

Pero para eso está Less.

Partiendo de que en el BODY tenemos un font-size de 16px crearemos un mixin nuevo y lo llamamos por ejemplo dentro de nuestra lista:

.font-size(@size){

@rem: @size / 16;

font-size: @size * 1px;

font-size: ~"@{rem}rem";

}

ul{

.listas();

.font-size(24);

}

Explicaremos línea por línea:

1. Nombre del mixin y valor con el que llamaremos al mixin

2. Creamos una variable llamada rem en la que hacemos la conversión pixel a rem como hablamos más arriba.

3. Primer valor font-size que multiplicamos por 1px para transformar esos 24 que le pasamos en el mixin al llamarlo a 24px.

4. Segundo font-size, este con el valor del rem. El símbolo ~ (alt + 4) hace que todo el contenido siguiente con comillas lo agregue pero sin ellas. ¿Por qué le ponemos las comillas entonces? Porque lo leerá como una variable, la cual no existe.

Para verlo más claro lo traduciremos a javascript --> font-size = rem + 'rem';

y a php --> $font-size = $rem .'rem';

Ahora si, ¿no?

Ya tendríamos nuestra función terminada. Si vamos a Firefox por ejemplo veremos que en los li hay un font-size: 1.5rem y si vamos a un Explorer más viejo que el 9 aparecerá font-size: 24px.

Pues cada vez que vayamos a dar en nuestro archivo less un tamaño de letra a algo en vez de poner font-size: 11px pondríamos font-size(11).

Como vemos, los mixins son una gran ayuda, ya que dotamos al css de programación, adaptando dinámicamente el estilo a los navegadores en que veamos nuestra web o aplicación.

LISTAS ANIDADAS

Procedamos a meter un input en el index:

<input type="text" id="texto" placeholder="Escribe"></div>

Y en el .less

#texto{

border:1px solid green;

color:blue;

&:focus{

border: 1px solid yellow;

}

}

¿Qué hemos hecho aquí? Sin tener que poner fuera de #texto un #texto:focus, con &:focus lo hemos podido meter dentro de la propia capa. Cierto es que esta ventaja no nos da tanta mejoría en lo que a líneas se refiere como las otras dos, pero sí es verdad que el código se lee mucho mejor que poniendo esto:

#texto{

border:1px solid green;

color:blue;

}

#texto:focus{

border: 1px solid yellow;

}

A simple vista ya vemos con la primera forma que ese evento pertenece a esa capa en concreto y no a otra. También podríamos con el tiempo meter más estilo entre #texto y #texto:focus, quedando este evento apartado de la capa, lo que dificultaría la lectura de la hoja de estilo (que no su funcionamiento, claro).

Pero no sólo podemos usar esto para el uso de eventos como active, focus, hover, etc. También podemos usarlo para las capas o clases que estén unas dentro de otras. Ejemplo:

Metamos la lista que creamos antes en un div tal que así:

<div id="listita">

<ul>

<li>Uno</li>

<li>Dos</li>

<li>Tres</li>

</ul>

</div>

Y creemos otra más, pero sin div contenedor.

Ahora cogemos en el .less y cambiamos es estilo que le dimos antes para meterlo dentro de una capa:

#listita{

ul{

.listas();

}

}

¿Qué pasó ahora en nuestra web? Sólo una de las 2 listas ha cogido los estilos, la de la capa.

Otro ejemplo más:

HTML:

<div id="capa">

<div class="caja">

<h1>Hola a <a>todos <b>y</b> a todas</a></h1>

</div>

</div>

CSS:

#capa{

width: 200px;

}

#capa .caja{

background: green;

}

#capa .caja h1{

font-size: 11px;

}

#capa .caja h1 a{

font-family: Verdana;

}

#capa .caja h1 a b{

color: red;

}

LESS:

#capa{

width: 200px;

.caja{

background: green;

h1{

font-size: 11px;

a{

font-family: Verdana;

b{

color: red;

}

}

}

}

}

Nada mejor para los amantes del tabulado.

|| Tags: , , ,

valoración de los lectores sobre Preprocesadores CSS: LESS

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 3 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.