Comenzar con el pre procesador LESS

LESS es un pre procesador dinámico de css que nos permite programar  en  CSS con variables, funciones, operaciones matemáticas, etc asi haciendo mas interesante el desarrollo para los front end.

LESS no es el único pre procesador que podemos usar ahi tenemos a  Stylus y SASS que tambien estan buenos pero por que mi preferencia a LESS?  es por que  tiene una sintaxis muy parecida a CSS y la escala de aprendizaje es casi nula.

para comenzar primero nos vamos a la web de LESS http://lesscss.org/ o podemos usar una CDN //cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js agregamos el javascript en el pie del html (lo pueden hacer en la cabecera pero no lo recomiendo por no ser una buena practica).

ahora cuando agregue un css debe colocar de esta forma

<link rel=»stylesheet» type=»text/less» href=»css/main.css»>

si se dan cuenta cambie solo el type  que ya no es «text/css» si no «text/less» esto sirve para que el javascript sepa en que archivo efectuar el proceso y otro detalle que el archivo que llamamos en el href puede tener la extension de css o less.

ahora en nuestro archivo externo que incluimos podemos ya programar.

creamos una variable indicando una fuente y para mostrar solo lo colocamos en donde queremos que se muestr

@fuentebase:'HELVETICA';
 
body{
font-family:@fuentebase;
}

Creamos una funcion (Mixins) que nos permitira ahorrar lineas de codigos para usr el font face, las funciones como en todo lenguaje de programacion nos permite enviar variables y en este caso nuestra funcion tiene 2 variables el nombre que le asignamos a la fuente para ser llamada y el nombre del archivo que tiene la fuente en todos sus formatos.
para concatenar una variable con un string el nombre de la variable debe estar entre corchetes {} y el @ que simboliza que es variable fue de los corchetes.

/*creamos una funcion y pedimos 2 variables*/
.font-face(@nombrefuente,@nombrearchivo) {
	font-family: @nombrefuente;
	src: url('../fonts/@{nombrearchivo}.eot');
	src: local('?'), url('../fonts/@{nombrearchivo}.woff') format('woff'), url('../fonts/@{nombrearchivo}.ttf') format('truetype'), url('../fonts/@{nombrearchivo}.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
/*aqui solo llamamos a la funcion mandando las variables*/
@font-face {
	.font-face('HELVETICA','HELVET')
}
@font-face {
	.font-face('Dakota Regular','Dakota_Regular')
}

anidar elementos que su nombre lo describe perfectamente pero con un ejemplo lo tendrán mas claro

section{
    width: 1024px;
    height: 768px;
    input{font-family:@fuentebase;}
    .nube{ position: absolute;}
}

como se ven incluimos dentro de section a los otros elementos que cuando lo procese less nos da como resultado

section{
    width: 1024px;
    height: 768px;
}
section input{font-family:@fuentebase;}
section .nube{ position: absolute;}

para crear un hover u otro estado del elemento lo hacemos de esta manera

a{
	text-decoration: none;
 
	&:hover{
		text-decoration: underline;
	}
}

less por defecto esta configurado para estar para desarrollo pero cuando subamos en linea debemos indicar a less que ya estamos en producción y para esto debemos incluir este script antes del llamado al less.js.

// puede ser development y production
    less = {
        env: "production"
    };

y para que sirve?
si tu archivo less tiene un error

nos muestra esto e imagínate que el usuario vea esto? no es nada profesional entonces debemos configurar cuando esta en linea que esto este en producción y las lineas de arriba sirven para eso.

Ahora ahi un detalle que seguro varios ya se dieron cuenta que hacemos lenta la carga de la web por el proceso de generar entonces pueden usar Winless un software que le das la ruta de tu archivo less y te genera el css y por cada cambio este programa lo actualiza.