DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
12-09-2013

LESS CSS es una extensión del CSS que permite agregar dinamismo al CSS tradicional; en otras palabras LESS CSS resulta en una extensión de las Hojas de Estilo en Cascadas conocidas como CSS.

¿Qué novedad trae LESS CSS que no tenga el CSS tradicional?

LESS CSS tiene características de los lenguajes de programación como lo son el uso de funciones y variables que aunque pueda sonar a "poco" resultan de una gran ayuda cuando la Hoja de Estilo en Cascada (CSS) crece.

LESS tiene muchas características que lo hace especial y en combinadas resultan en muchas más; en las siguientes entradas sobre LESS CSS veremos sus principales características.

¿Cómo se instala LESS CSS?

LESS CSS corre de ambos lados; es decir tanto del lado del cliente con JavaScript o del lado del servidor con Node.js.

¿Cómo usar LESS CSS en el lado del cliente?

1

Según mi opinión, la manera más sencilla de empezar a usar LESS CSS, es del lado del cliente; con solo incluir nuestra Hoja de Estilo .less; por ejemplo style.less.

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

Y luego incluir el less.js disponible aquí en nuestro documento HTML.

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

¿Cómo funciona?

Simplemente, el archivo JavaScript traduce nuestra Hoja de Estilo con extensión .less (que es la que nosotros generamos) a .css momento de carga de la página.

De esta forma podemos usar LESS CSS de una manera sencilla; por supuesto, este modo sólo es recomendable para ambientes de desarrollo; para el ambiente de producción se recomienda colocar directamente el CSS ya generado por el JavaScript de LESS CSS.

¿Otras formas de usar LESS CSS?

Tenemos varias opciones para compilar los archivos .less; podemos usar programas como simpLESS; instalarlo via npm; o usar un compilador en la web como el que esta disponible en la página oficial de LESS CSS.

¿Qué ofrece LESS CSS?

Variables en LESS CSS:

Las variables en LESS CSS tiene un comportamiento similar a las constantes en cualquier lenguaje de programación; permiten especificar valores utilizados a lo largo de la Hoja de Estilo en un solo lugar; es decir, pueden ser fácilmente reutilizados en cualquier parte de la Hoja de Estilo .less. Ver más.

@variable: valor;
        

Mixins en LESS CSS:

Mixins permiten incrustar todas las propiedades de una clase en otra clase con sólo incluir el nombre de la clase como una de sus propiedades, en otras palabras, permite heredar el contenido definido en el Mixins en otras clases; además de esto, permiten recibir parámetros para potenciar su uso cambiando parámetros como colores, tamaños, ect: Ver más.

            .esquinas-redondeadas () {
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
              -ms-border-radius: 5px;
              -o-border-radius: 5px;
              border-radius: 5px;
            }

            header {
              .esquinas-redondeadas;
            }
        

Al compilar el código LESS anterior obtendremos:

            header {
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
              -ms-border-radius: 5px;
              -o-border-radius: 5px;
              border-radius: 5px;
            }
        

Reglas internas en LESS CSS:

Permite anidar selectores dentro de otros selectores; que aunque en un inicio puede resultar un poco complicada, es una característica bastante útil, ya que permite organizar mejor el documento de Hoja de Estilo y reducir el tamaño del mismo.

            section article{
              h3 {
                 color: #0BF;
                 font-size: 22px;
                 font-weight: bold;
              }
              p { 
                margin: 35px 0 40px 70px;
                text-indent: 0;
                a { 
                  color: #0BF;
                  text-decoration: none;
                }
              }
            }
        

Al compilar el código LESS anterior obtendremos:

            section article h3 {
              color: #0BF;
              font-size: 22px;
              font-weight: bold;
            }
            section article p {
              margin: 35px 0 40px 70px;
              text-indent: 0;
            }
            section article p a {
              color: #0BF;
              text-decoration: none;
            }
        

Operaciones en LESS CSS

Con las Operaciones en LESS CSS puede sumar, restar, dividir y multiplicar los valores de las propiedades como si de simple números se tratase; aunque nos suene a poco cuando diseñamos nuestra Hoja de Estilo nos daremos cuenta de que siempre hay valores que se repiten pero con distintas tonos o tamaños (por ejemplo en el pseudo class css :hover); aquí encontraremos una gran ayuda a las Operaciones de LES CSS:

	        @azul: #0BF;;

            a {
              color: (@azul * 3);
            }
        

Al compilar el código LESS anterior obtendremos:

            a {
              color: #00ffff;
            }
        

Conclusión

LESS CSS es una poderosa herramienta muy utilizada y que facilita al momento de desarrollar las Hojas de Estilo en Cascada a nuestra aplicación web, páginas web, etc; que como he venido diciendo, facilita y permite organizar enormemente las Hojas de Estilo en Cascada.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Gradientes sobre el texto

Gradientes sobre el texto

Calendario de cubo

Calendario de cubo

Creando un pulso con CSS

Creando un pulso con CSS

Algunos artículos que te pueden interesar

Efectos hovers sobre imágenes con CSS

Efectos hovers sobre imágenes con CSS

En esta entrada veremos cómo crear un simple efecto hover con CSS sobre una imagen; para esto se coloca una imagen como fondo en un contenedor y colocar múltiples cuadros consecutivos (divs) de una fracción del tamaño del fondo.

Andrés Cruz 17-03-2016

El uso de la función step en las animaciones y transiciones en CSS

El uso de la función step en las animaciones y transiciones en CSS

La función steps() permite controlar el movimiento de las animaciones indicando el número de "frame" o saltos que queremos que conste una animación o transición.

Andrés Cruz 16-03-2015

El elemento symbol para los SVG en HTML

El elemento symbol para los SVG en HTML

En esta entrada veremos un elemento muy útil para trabajar con los SVG que es el elemento symbol; este elemento ahorra mucho trabajo y permite agrupar una serie de figuras básicas y pintarlos empleando el elemento use.

Andrés Cruz 01-06-2015