lunes, 27 de abril de 2015

Asp.net 5.0 Less - Visual Studio 2015

Entre las novedades de Asp.net 5.0 está la integración con Less y Saas. Ambos frameworks sirven para extender Css de modo que permita declara variables, funciones y en definitiva hace un poco más dinámico el trabajar con hojas de estilos y temas.

Less es un framework javascript y Saas está desarrollado originalmente en ruby, ambos compilan Css "extendidos", interpretan la lógica que hemos añadido y el resultado de la compilación es un Css plano que todos los navegadores entienden.

Para entenderlo mejor lo vemos con un ejemplo. Para crear un proyecto Asp.net lo mejor es que descargues Visual Studio 2015 Preview, abre nuevo proyecto, crea un archivo Less:


A continuación pega este código:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}
El siguiente paso implica consiste en añadir el compilador less al proyecto, para ello usaremos NPM que es un gestor de paquetes javascript ampliamente conocido por la comunidad que también debuta en Visual Studio 2015. Editaremos package.json para añadir estas lineas:
"grunt-contrib-less": "^1.0.0",
"less": "^2.1.2"
Para descargar los paquetes vamos a la carpeta Dependencys del proyecto, vamos a la carpeta NPM y pulsamos botón derecho/restore packages. Si nos fijamos deberíamos tener los paquetes js en la carpeta NPM. Tenemos que añadir configuración para automatizar la compilación de estos archivos cuando compilemos el site. En este escenario interviene grunt.js que también debuta en Visual Studio. Se trata de añadir este bloque de configuración en grunt.initConfig({}).
//compilar less to css
less: {
    development: {
        options: {
            paths: ["importfolder"]
        },
        files: {
            "wwwroot/css/sample.css": "Less/Sample.less"
        }
    }
}
También en grunt.js pero fuera del ámbito initConfig() añadiremos esta otra línea:
grunt.loadNpmTasks("grunt-contrib-less");
Siguiente paso, nos vamos al menú VIEW/Other Windows/Task Runner Explorer.



Compilamos el proyecto, examinamos el código en cliente con el navegador y nos fijamos en que automáticamente se ha generado el archivo css plano.



Hasta aquí el post de hoy, recordaros que cualquier aportación o comentario en areaTIC es bienvenido. Que vaya bien!!

No hay comentarios:

Publicar un comentario