Uso de LESS para escribir CSS

LESS

Antaños, las páginas web se desarrollaban solo en el lenguaje de HTML, el lenguaje de programación web más básico. Tiempo después aparecen las hojas de estilos (CSS) que permitía darle estilos a la estructura diseñada en CSS, que es como conocemos hoy el diseño de una web básica (HTML+CSS).

Hoy día ya éste lenguaje de estilos nos presenta un defecto que no es más que la imposibilidad de usar variables. Es decir, que si tenemos un color base para la página y algún día quisiéramos cambiarlo, hay que ir modificando todas las clases que contienen tal color. Para la solución de éste problema nació un framework basado en javascript y CSS llamado LESS.

Uso de LESS CSS

Less CSS es un lenguaje que no busca reemplazar al CSS común, sino más bien facilitar su escritura en etapada de desarrollo. Es decir que como resultado final, Less CSS nos va a generar una hoja de estilos CSS completa.

La ventaja de LESS, como dije arriba, es que permite el uso de variables pero también permite crear funciones, realizar operaciones aritméticas, etc. Todo ésto solo para facilitar el desarrollo de la hoja de estilos CSS, y con una sintáxis que parece relacionar CSS con javascript.

LESS es un framework que se debe usar solo en etapa de desarrollo, usando herramientas que permitan compilar los archivos .less a una hoja de estilos .css que pueda ser leída por los navegadores.

¿Cómo empiezo a escribir en LESS CSS?

Bueno, primero que nada debes visitar la página oficial de less para conocer sus funciones y su sintáxis. Conociendo su sintáxis básicamente debes guardar el documento como un archivo de extensión .less y compilarlo con algunos de éstos programas (Elige el que más te guste).

  • WinLess
  • SimpleLess
  • Crunch!
  • Less.app
  • KoalaApp

Entre otros que existen, yo recomiendo SimpleLess (Windows / OSX) o WinLess si estás en Windows, y Less.app si estás en Mac.

La mayoría de éstos compiladores reconocerán cuando se realizan cambios en el documento haciendo una auto-compilación. Por lo que no será molestia escribir en LESS, mientras éste genera una hoja de estilos CSS.

Debes tomar en cuenta que en tu archivo HTML, no debes enlazar los documentos .less sino el .css generado.

<link rel="stylesheet" href="styles.css">

Bien, si no piensas usar un compilador, existe una librería en javascript llamada less.js que su función será traducir lo escrito en .less para leerlo como .css Su forma de uso sería.

<script src="jquery.js"></script>
<script src="less.js"></script>
<link rel="stylesheet/less" href="styles.less">

Librería Less.js

Recomendaciones de uso de LESS CSS

Como dicho arriba, éste framework está pensado para uso unicamente en etapa de desarrollo. Si bien es cierto, usando la librería less.js, puede que el navegador reconozca los estilos correctamente. Sin embargo, si un usuario tiene bloqueado el javascript en su navegador, no visualizará ningún estilo.

Por lo tanto, lo recomendado es desarrollar con LESS y en etapa de producción (La página ya subida al servidor), usar el archivo compilado de extensión .css.

Para aprender la sintaxis de LESS, puedes buscar en Youtube tutoriales de éste, donde encontrarás buen material de calidad.

Si tienes alguna duda acerca de como usar LESS, ¡no dudes dejar un comentario aquí abajo! 😀

Deja un comentario

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