Contenido

LESS, CSS enriquecido en el cliente

15 May

+ 6

Hace unos días vimos SASS, una herramienta pensada para agilizar la maquetación CSS de nuestros proyectos. Vimos que ofrecía una serie de herramientas que nos permitía trabajar con una versión enriquecida de CSS con variables, funciones, anidamiento de selectores,…

LESS

Pues LESS, nos ofrece más de lo mismo, usando una sintaxis similar a que vimos con SASS, y nos ofrece las mismas maravillas que ya hemos visto.

Variables

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Mixins

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

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Anidamiento de selectores

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

Funciones y operaciones

@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%);
}

Como podemos ver, nuestros CSS’s cogen una aspecto de lenguaje de programación que permite dinamizarlas fácilmente.

Compilación en el cliente

A diferencia de SASS, LESS permite compilar las hojas de estilos dinámicas (.less) directamente en el navegador mediante una librería JS que cargaremos en nuestras páginas (para Chrome, Safari y Firefox).

<head>
	<link rel="stylesheet/less" type="text/css" href="styles.less">
	<script src="less.js" type="text/javascript"></script>
</head>

Es importante poner las hojas de estilos antes de añadir la librería javascript e indicar que mediante el atributo rel que el tipo de stylesheet del que se trata es uno de los que se han de compilar.

Además, nos añade la capacidad de refrescar los estilos mediante el Watch Mode, que podremos activarlo mediante un parámetro en la URL a la que accedemos (#!watch) o desde la consola de Firebug ejecutando less.watch().

  • Yo prefiero SASS, con SASS la hoja sólo se compila una vez, el navegador es indiferente y no hay que hacer ninguna llamada adicional a un js.

    • @Israel: LESS se puede usar igual, dispone de un comando para compilar las hojas de estilo en el servidor y así solo realizar esta tarea una vez, al contrario SASS no dispone de funcionalidad en el cliente, que es un añadido más.

    • @aNieto2k: Lo de que se podía compilar en el servidor no lo sabía, pero lo de que se compile en (algunos) clientes no me parece una funcionalidad «buena».
      Sigo pensando que lo mejor sería usar SASS ó, ahora que sé que se puede compilar en el servidor, LESS (compilando en el servidor).
      P.D.: Soy muy cabezota XD

  • estoy con @Israel, yo creo less es mejor, porque lo de compilar SASS en servidor ¿que clase de servidor tienes que tener?

    Prefiero un compilador en php (cómo lessphp) que no tengo que instalar nada de nada y va en mi servidor.

    Para ir probando esta muy bien disponer del compilador js que, cómo dice un amigo mío:
    «está bien y noscaro»

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.