Compilado de Less y Sass

Si al ejecutar yo angular elegiste Bootstrap con Sass, tu Gruntfile.js estará preparado para compilar Sass.

La tarea compass

Compass es un framework open-source para el preprocesador Sass. Ayuda a construir hojas de estilo gracias a su enorme biblioteca de mixins y funciones de Sass, herramientas para crear y usar sprites, y mejoras del workflow incluyendo configuración de Sass basada en archivos y un sistema sencillo de extensiones.

Esta tarea requiere Ruby, Sass, and Compass >=0.12.2. Si estás en Linux u OS X seguramente ya tienes Ruby instalado; puedes probarlo escribiendo ruby -v en el terminal. Una vez Ruby instalado, ejecuta

    gem update --system && gem install compass

Compass funciona a nivel de directorio. Por eso no se definen src/dest, y en su lugar hay que definir las opciones sassDir y cssDir.

Configuración de ejemplo:

grunt.initConfig({
  compass: {                  // Task
    dist: {                   // Target
      options: {              // Target options
        sassDir: 'sass',
        cssDir: 'css',
        environment: 'production'
      }
    },
    dev: {                    // Another target
      options: {
        sassDir: 'sass',
        cssDir: 'css'
      }
    }
  }
});

grunt.loadNpmTasks('grunt-contrib-compass');

grunt.registerTask('default', ['jshint', 'compass']);

Puedes encontrar todas las opciones en https://github.com/gruntjs/grunt-contrib-compass

La tarea Less

Less y Sass son las principales alternativas a usar CSS plano. Si tienes preferencia por Less también puedes utilizarlo en el flujo de empaquetado del proyecto.

Puedes obtener información en https://github.com/gruntjs/grunt-contrib-less.

Ejercicios

0. Comprueba la configuración de Compass que existe en Gruntfile.js
1. Comprueba el contenido del archivo app/styles/main.scss
2. Ejecuta grunty comprueba el resultado en la carpeta styles