Tabla de contenido
Una vez más, aquí dejo un pequeño tutorial debido al «éxito» relativo y al interés que ha suscitado ante alguna gente esto del LESS. Estos pequeños apuntes que voy a colocar vienen dados debido a la curiosidad de como utilizar estilos dinámicos con LESS. Esto puede resultar muy útil para según que cosas a la hora de programar y dar estilo a una web.
Antes de empezar sería bueno recordar brevemente que Less es un lenguaje de hojas de estilo dinámico, que se puede ejecutar en el lado del cliente con Javascript o en el lado del servidor con Node.js. Además es totalmente multiplataforma y de código abierto, lo cual siempre viene bien.
Less añade todo lo que alguna vez hemos echado en falta con CSS. Cosas como variables, operaciones y mixins.
Cómo usar Less para crear estilos dinámicos
En el lado del cliente
Primero descargamos el archivo less.js desde la web oficial de less. Cosa imprescindible. Después creamos una hoja de estilos Less, por ejemplo style.less y la añadimos al header de nuestro HTML de la siguiente manera:
Código :
< link="stylesheet/less" href="less/sytle.less"/>Por último hacemos referencia a less.js que descargamos anteriormente
Código :
Es muy importante que la hoja de estilos se añada antes que el script.
En el lado del servidor
Para compilar los archivos Less tenemos varias opciones: Para Windows, mac y Linux se puede usar simpLESS o si prefieren la línea de comandos, pueden instalar Less vía npm.
Probando un poco esto de Less
Llegados a esta parte es hora de echar un vistazo a la gran variedad de funcionalidades que nos ofrece Less.
Comentarios
Podemos usar los comentarios normales de CSS y estos serán visibles en el código resultante:
Código :
/* Comentario visible en el css resultante */Pero también podemos usar comentarios que solo son visibles en el archivo Less:
Código :
//Comentario no visible en el css resultante
Variables
Las variables en Less funcionan exactamente igual que en cualquier lenguaje de programación y se usan de la siguiente manera:
Código :
@link-color: #F34F25;
@h-color: #20496C;
a {
color: @link-color;
}
h1, h2 {
color: @h-color;
}
En este ejemplo evitamos tener que estar repitiendo el código del color por toda la hoja de estilos y si quisiéramos cambiar de color, simplemente cambiamos el valor de la variable y no ir cambiando uno por uno en todos los lugares que se use.
Alcance de las variables
Como en cualquier otro lenguaje, en Less las variables también tienen alcance, por ejemplo:
Código :
#link1 {
@link-color: #F34F25;
color: @link-color;
}
#link2 {
color: @link-color;
}
Esto nos daría error, pues la variable está definida localmente dentro del elemento #link1.
Otro ejemplo:
Código :
@link-color: #F34F25;
#link1 {
color: @link-color;
}
#link2 {
@link-color: #000;
color: @link-color;
}
¿Qué pasará aquí? #link1 usará el color naranja, mientras #link2 usará el color negro.
Operaciones
Con la ayuda de las operaciones podemos sumar, restar y multiplicar, teniendo una gran flexibilidad a la hora de manipular valores, por ejemplo:
Código :
@border: 2px;
h1 {
border-top: @border;
border-bottom: @border + 2;
border-left: @border - 1;
border-right: @border * 3;
}
Pero las operaciones no son válidas sólo para los valores numéricos, también nos sirven para manipular colores, ejemplo:
Código :
@box-color: #1E6381;
@border: 1px;
.box {
background: @box-color;
border: @border * 6 solid @box-color - #222;
width: 100px;
height: 100px;
}
Funciones de color
Less nos ofrece una gran variedad de funciones para manipular colores y su uso es muy sencillo: nombrefuncion(color, porcentaje):
Código :
@color: #1E6381;
.box {
background: darken(@color, 20%);
}
Además podemos combinar el uso de estas funciones de manera sencilla:
Código :
.box {
background: lighten(spin(@color, 8%), 20%);
}
También podemos extraer información de los colores:
Código :
hue(@color);
saturation(@color);
lightness(@color);
alpha(@color);
La lista completa de funciones: lighten, darken, saturate, desaturate, fadein, fadeout, fade, spin y mix.
Anidación
Cuando usamos CSS si queremos que un elemento que está dentro de otro tenga un estilo diferente al resto de la página lo haríamos de la siguiente manera:
Código :
.block div {
float: left;
margin-right: 20px;
margin-bottom: 5px;
width: 100px;
height: 100px;
}
.block span {
color: #FFF;
display: block;
margin-left: 22px;
margin-top: 35px;
}
Si utilizamos Less podemos lograr lo mismo de una forma más ordenada, intuitiva y fácil usando anidaciones:
Código :
.block {
div {
float: left;
margin-right: 20px;
margin-bottom: 5px;
width: 100px;
height: 100px;
}
span {
color: #FFF;
display: block;
margin-left: 22px;
margin-top: 35px;
}
}
Mixins
Esta es una de las cosas más interesantes de Less, con los mixins vamos a evitar estar repitiendo una y otra vez lo mismo por toda la hoja de estilos (que al menos a mi me suele ocurrir), con lo cual seremos mucho más productivos. Los mixins en Less son como las funciones en otros lenguajes de programación, si quisiéramos poner bordes redondeados a un div con solo CSS, lo haríamos de la siguiente manera:
Código :
.box {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
¿Y si quisiéramos que otra clase también tuviera los border redondeados 5px?, sí, podríamos hacer una clase de bordes redondeados a 5px y agregar 2 clases al elemento, pero esto lo podemos lograr de una forma más limpia usando mixins de esta forma:
Código :
.rounded() {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.box {
width: 100px;
height: 100px;
.rounded;
}
Nótese los paréntesis al final del nombre del mixin, si no hiciéramos esto el código se añadiría como una clase cualquiera. Pero ¿Qué hacemos si queremos que el valor de los bordes redondeados sea 3px y no 5px? ¿Hacemos otro mixin igual pero con 3px?. No, los mixins son hermosos y podemos pasarles parámetros:
Código :
.rounded(@value) {
-webkit-border-radius: @value;
-moz-border-radius: @value;
border-radius: @value;
}
Para usarlo solamente hacemos esto:
Código :
.box {
.rounded(3px);
}
También podemos poner parámetros por defecto:
Código :
.rounded(@value:5px) {
-webkit-border-radius: @value;
-moz-border-radius: @value;
border-radius: @value;
}
#box1{
.rounded; //Bordes redondeados a 5px
}
#box2 {
.rounded(3px); //Bordes redondeados a 3px;
}
Un ejemplo un poco más complejo:
Código :
.rounded(@value:5px) {
-webkit-border-radius: @value;
-moz-border-radius: @value;
border-radius: @value;
}
.button(@radius:2px, @background: #333, @color: #fff, @padding: 5px, @width: 90px){
.rounded(@radius);
background: @background;
color: @color;
padding: @padding;
width: @width;
}
#button {
.button(5px);
}
Como podemos comprobar en este ejemplo, podemos crear mixins con múltiples parámetros y utilizar un mixin dentro de otro. También podemos usar todos los parámetros en una sola línea:
Código :
.border(@width: 1px, @type: solid, @color: #000){
border:@arguments;
}
#box2 {
.border(2px, dotted);
}
El resultado será:
Código :
#box2 {
border:2px dotted #000;
}
Espacios de nombres
Los espacios de nombres en cualquier lenguaje de programación se usan para agrupar funcionalidades. En Less podemos hacer lo mismo con la ayuda de los mixins.
Código :
#namespace1{
p {
margin: 12px;
}
a {
color: #000;
}
.submit{
background: blue;
color: #fff;
padding: 5px;
}
}
#namespace2{
p {
margin: 10px;
}
a {
color: #fff;
}
.submit{
background: red;
color: #000;
padding: 2px;
}
}
Se usan de la siguiente manera:
Código :
.submit-button {
#namespace1 > .submit;
}
.submit-button2 {
#namepsace2 > .submit
}
Esto es muy útil por ejemplo a la hora de desarrollar temas.
Importar
Se pueden importar otros archivos Less o CSS a nuestro archivo de trabajo actual y usar todos los mixins, variables, etc. que tengamos definidos en ellos. De esta forma podemos tener librerías reutilizables para todos nuestros proyectos.
Código :
@import “mixins.less”
@import “variables”
@import “reset.css”
La extensión .less es opcional.
Y bueno, con esto creo que se puede dar por concluido esta pequeña amalgama de apuntillos sobre como crear estilos dinámicos con LESS. La fuente de todo esto que he publicado viene de buscar «un poco» por internet.