Less Es uno de los módulos que empezamos a ver en nuestros anteriores ejemplos como complemento a express y hbs. Less es un pre procesador de CSS que nos permite generar nuestro archivo css a partir de nuestro código less. Este último, nos permite usar variables, funciones y herencia.
El uso de las variables es algo muy útil cuando tenemos que reutilizar código. Un ejemplo muy típico sería el de guardar un color:
@color-base: #2d5e8b;
.class1 {
background-color: @color-base;
}
.class2 {
background-color: #fff;
color: @color-base;
}
.class3 {
border: 1px solid @color-base;
}
En el ejemplo podemos ver que la variable “@color-base” es usada por 3 clases diferentes. Algo muy útil para manejar una paleta de colores.
De acuerdo a la documentación de su sitio oficial podemos ver que less puede ser usado tanto como pre-procesador desde el lado del server, tanto como desde el lado cliente. Obviamente, aqui lo veremos desde la primera opción, interactuando con express y hbs
Less-middleware, el compilador de less para usar en express
al hacer una instalación del modulo less, podemos ver que podemos crear generar nuestro archivo css a partir del less como strout en la consola
$ lessc styles.less
Luego copiar esa salida a un archivo css. Algo no muy cómodo. También se puede usar su método render, y hacer unas cuantas cosas mas aún. Incluso se puede encontrarse un tutorial aca para hacer un compilador de less en node.js
Siendo que vamos a utilizar Express como Framework podemos contar con otro módulo: less-middleware que tal como su nombre indica se trata de less + el software necesario para la comunicación con Express. Se instala igual que tantos otros módulos:
sudo npm install less-middleware -g
Si seguimos el primer tutorial de esta serie, ya podemos usarlo sin problemas.
Un ejemplo
Retomándo el último tutorial de parciales vamos a agregarle un par de líneas para usar less sobre ese mismo ejemplo. Abrimos el archivo app.js en donde editaremos nuestro código. Allí creamos dos nuevas variables: path y lessMiddleware respectivamente
var path = require('path');
var lessMiddleware = require('less-middleware');
luego a la variable app le agregamos unas cosas usando el método “use”
app.use(app.router);
app.use(lessMiddleware({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));
router es el código que corre las rutas de la aplicación, express.static es la función que sirve la carpeta, que en este caso se llama public, todo el código en defenitiva sería el siguiente:
var fs = require('fs');
var express = require('express');
var hbs = require('hbs');
var path = require('path');
var lessMiddleware = require('less-middleware');
var app = express();
hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');
app.use(app.router);
app.use(lessMiddleware({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res) {
res.locals = {
title: 'testeando hbs'
}
res.render('index');
});
app.listen(3000);
Aun no probamos la app, porque como dijimos, debemos crear la carpeta public, la cual lo haremos dentro del proyecto, al mismo nivel que app.js
Luego allí, creamos el archivo style.less
Algo sobre la sintaxis de Less
Abrimos el archivo, vamos a crear unos estilos para esto. Primero unas variables que serán para colores:
@color-base: #2d5e8b;
@gray-color: #999;
y además vamos añadir dos funciones (si, css con funciones):
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
Estas funciones lo que hacen es dar el borde redondeado y la sombra al objeto html que pretendamos pasando como parametros los valores de radio en la primera función y de dirección, profundidad y transparencia en la segunda función. Su implementación sería:
.class{
.box-shadow(5px, 5px, 6px, 0.3);
}
y en el archivo css que imprima el resultado será:
.class{
-webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
por qué la función? porque estamos englobando una serie de propiedades que logran un mismo efecto. (en los ejemplos, bordes redondeados y sombra proyectada) aplicables según un navegador correspondiente.
Finalmente el código nos quedaría de la siguiente manera
@color-base: #2d5e8b;
@gray-color: #999;
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
html{
background: @gray-color;
}
body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
width: 900px;
margin-left: auto;
margin-right: auto;
background: #FFF;
.border-radius(20px);
.box-shadow(0px, 0px, 20px, 2);
}
header{
border-bottom:1px solid @gray-color;
padding:20px;
}
section{
padding:20px;
min-height: 300px;
}
footer{
text-align: center;
padding: 5px;
font-size: 10px;
color: #333;
}
h1{
color: @color-base;
}
Finalmente vamos a la consola y allí ejecutamos
node app.js
Allí tendremos la página creada con unos estilos aplicados.
Comments are closed.