Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Un preprocesador de CSS en JavaScript

Un preprocesador de CSS en JavaScript 10.DEC.13

Alvaro José Rios Ch
Fundador WebBizarro

Primero podemos comenzar explicando que es un preprocesador de CSS, pues bien podemos decir que es un lenguaje, aplicación, modulo o los tres inclusive que nos permite generar código CSS más limpio, con una sintaxis correcta y con menos trabajo, seguramente han oído hablar de Less y Sass que son los preprocesadores más usados, pero esta vez les voy a hablar de AbsurdJS.

AbsurdJS es un modulo de NodeJS que nos permite crear código CSS y HTML para nuestras aplicaciones web, pero ¿Porque usar AbsurdJS? La verdad es que he estado revisando las ventajas de este preprocesador frente a otros y les voy a mencionar algunas.

En primer lugar es JavaScript, no tienes que escribir en un lenguaje luego compilarlo a CSS e importarlo en tu proyecto, simplemente creas tus archivos js y los importas en tu aplicación de Node sin compilar nada.

Luego debemos mencionar que el CSS generado es mucho más limpio que el generado por otros módulos, por ejemplo el siguiente código en JavaScript

module.exports = function(api) {
    api.add({
        ".main-nav": {
            background: "#333"
        },
        ".main-content": {
            background: "#333"
        }
    })
}

Daria como resultado

.main-nav .main-content{
    background: "#333";
}

Como vemos el CSS que es común es combinado lo que representa una ventaja ya que entre menos código generado menos bytes tendra que descargar nuestra aplicacion.

También hay algo que es muy bueno que es que sobreescribe el css repetido

{
    ".main-nav": {
        "font-size": "20px"
    },
    ".main-nav": {
        "font-size": "30px"
    }
}

Retornara

.main-nav {
    font-size: 30px;
}

Además es muy flexible y perfecto para crear CSS dinámico con funciones y variables definidas en JavaScript. Por ejemplo

// B.js
module.exports = function(api) {
    api.storage("theme", function(type) {
        switch(type) {
            case "dark": return { color: "#333", "font-size": "20px" }; break;
            case "light": return { color: "#FFF", "font-size": "22px" }; break;
            default: return { color: "#999", "font-size": "18px" };
        }
    });
}

// A.js
module.exports = function(api) {
    api
    .import(__dirname + "/B.js")
    .add({
        ".main-nav": [
            {
                "font-size": "16px",
                padding: 0,
                margin: 0
            },
            api.storage("theme")("dark")
        ]
    });
}

Una muy buena opción si estamos haciendo aplicaciones en Node y queremos generar CSS dinámicos.

También se puede usar para generar HTML con la misma sintaxis, si lo quieres usar directamente en el browser solo debes importarlo en el HTML.