LESS: lenguaje de estilo dinamico

El día de hoy toca escribir sobre CSS y en específico de un compilador llamado LESS, como sabemos el lenguaje CSS nos permite definir el aspecto que tendrá nuestros archivos HTML, en general la sintaxis CSS es sencilla pero se queda un poco limitado y es aquí cuando los compiladores se vuelven algo fundamental para agregar características extras tales como: uso de variables, mixins, operaciones, funciones, etc. a nuestro código CSS sin que pierda compatibilidad con los navegadores web.

LESS

Es un lenguaje de hojas de estilo dinámico el cual se puede utilizar del servidor junto con Node.js o del lado del cliente aunque solo en los navegadores más actuales.

Sitio oficial: LESS

USO DESDE EL LADO DEL CLIENTE

En este ejemplo vamos a trabajar con LESS desde el lado del cliente.

LO QUE NECESITAMOS
  1. Descargar less.js desde la página oficial
  2. Crear un archivo llamado estilo.less
  3. Crear un archivo llamado index.html

CONFIGURAR LESS

Dentro de la etiqueta <head>de nuestro archivo index.html enlazamos los archivos necesarios: estilo.less y less.js, el orden es importante primero se tiene que enlazar la hoja de estilos y después el archivo less.js

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

Posteriormente abrimos nuestro archivo estilo.less y empezamos a jugar.

SINTAXIS

Variables

La forma de definir una variable es la siguiente @nombrevariable: valor; veamos algunos ejemplos

@verde: #93c097;
@azul: #a6d2f4;
@amarillo: #f6fbac;
@morado: #502e6f;
@colorfuente:'morado';
@color:@@colorfuente;
@anchoborde:1px;

En el ejemplo anterior podemos ver que también se puede definir una variable con el nombre de otra variable: @color:@@colorfuente; en este caso la variable color tiene asignado #502e6f. Ahora vamos a utilizar esas variables

body{
 background:@azul;
}
span{
 color:@color;
 padding:10px;
 margin:10px;
}

Mixins

Los mixins son funciones que permiten reutilizar las propiedades definidas en en una regla dentro otra regla en la hojas de estilo. Los mixins se pueden utilizar de la siguientes formas.

.classcss{  // Selector class
#idcss{   // Selector id
.mixin () {  // Sin argumentos
.mixin (@a) {  // Con un argumento asignando
.mixin (@a: 1) {  // Con un argumento asignando un valor por defecto
.mixin (@a: 1; ...) {  // Con 2 o mas argumentos

Veamos unos ejemplos

@verde: #93c097;
@amarillo: #f6fbac;

/* Selector de clase */
.redondeado{
 border:1px solid @amarillo;
 border-radius:10px;
}
/* Mixin con 2 argumentos y valores por defecto */
.borde1(@borde:solid, @bcolor:#789abc){
	border:1px @borde @bcolor;
	padding:10px;
	margin:10px;
}

/*Se utiliza la clase redondeado*/
.menu{
	margin:10px 0;
	background:@verde;
	.redondeado;
}

/*Se utiliza el mixin .borde1*/
.sidebar{
	width:30%;
	float:left;
	.borde1(dashed,@verde);
}
/* Se utiliza el mixin .borde1, con los valores por defecto
.resaltar{
    color:@verde;
   .borde1;
}

/**********************
* CODIGO CSS GENERADO *
**********************/
menu {
    margin: 10px 0;
    background: #93c097;
    border: 1px solid #f6fbac;
    border-radius: 10px;
}
.sidebar {
    width: 30%;
    float: left;
    border: 1px dashed #93c097;
    padding: 10px;
    margin: 10px;
}
.resaltar {
    color: #93c097;
    border: 1px solid #789abc;
    padding: 10px;
    margin: 10px;

Reglas anidadas

Con LESS crear selectores anidados es muy sencillo y ordenado, supongamos que vamos a crear el estilo para un menú con CSS lo utilizamos un código similar a este:

#menutop{
    background:#333333;
}
#menutop ul{
	list-style-type:none;
}
#menutop ul li{
	display:inline;
}
#menutop ul li a {
	padding:10px;
	color:#123456;
	background:#ffffff;
	text-decoration:none;
}
#menutop ul li a:hover {
	color:#654321;
	background:#dddddd;
}

Con less el código queda mejor organizado:

#menutop{
	background:#333333;
	ul{
		list-style-type:none;
		li{
			display:inline;
			a{
				padding:10px;
				color:#123456;
				background:#ffffff;
				text-decoration:none;
				&:hover{
					color:#654321;
					background:#dddddd;
				}
			}
		}
	}
}

Operaciones

Las operaciones permiten sumar, restar, multiplicar y dividir los valores de las propiedades o colores, veamos algunos ejemplos.

@anchoborde:1px;
@morado:#502e6f;

span{
    border: (@anchoborde + 2) solid (@morado - #123456);
}

p{
    color:(@morado * 2);
    padding: (100% / 20);
}

/************************
*  CODIGO CSS GENERARO  *
************************/

span{
    border:3px solid #502e6f;
}
p{
    color: #a05cde;
    padding: 5%;
}

Funciones

Less nos ofrece una serie de funciones muy útiles, aquí algunas de ellas


color(@string); // Convierte una cadena a color
ceil(@number); // Redondea un numero hacia arriba
floor(@number); // Redondea un numero hacia abajo
percentage(@number); // Convierte un numero a porcentaje ej. .25 => 25%
saturate(@color, 10%); // Regresa un color 10% mas saturado
desaturate(@color, 10%); // Regresa un color 10% menos saturado
lighten(@color, 10%); // Regresa un color 10% mas claro
darken(@color, 10%); // Regresa un color 10% mas obscuro
fadein(@color, 10%); // Regresa un color 10% menos transparente
fadeout(@color, 10%); // Regresa un color 10% mas transparente
fade(@color, 50%); // Regresa un color 10% al 50% de transparencia
mix(@color1, @color2, [@weight: 50%]); // Regresa la combinación @color1 y @color2
greyscale(@color); // Regresa el gris que resulto al desaturar el color

Hasta aquí el post del día de hoy, abajo les dejo el archivo de ejemplo, para más información sobre LESS pueden acceder a su pagina oficial donde encontraran toda la documentación.

download

Deja un comentario