Integrar Sass y Compass en proyectos web
Cuantos de vosotros os habeis atrevido a meter mano al css de vuestros proyectos? ¿Y cuantos juramentos habeis echado al no conseguir colocar las cosas en su sitio?¿Como de caótico habeis dejado los estilos? ¿Cuánto tiempo habéis perdido buscando un selector?
El mundo Frontend avanza rapidisimo y ya hay soluciones y ayudas para casi todo. Ejemplo de ello son Sass y Compass.
En este post, os voy a contar que son y cómo podemos integrarlos en proyectos Java usando Maven y en proyectos Javascript usando Grunt
Que es Sass
Sass es un pre-procesador de Css que se utiliza para describir el estilo de un documento de manera limpia y estructural.
Nos proporciona 2 formas de trabajar, con ficheros .scss (más parecido a un lenguaje estructurado) o con ficheros .sass (más cercanos al css).
Cualquiera de las 2 sintaxis nos proporcionan una serie de utilidades para trabajar de forma mas limpia.
- variables: podemos declarar variables y usarlas a lo largo de la hoja de estilos
- anidacion: podemos aplicar estilos anidando propiedades evitando asi repetir selectores
- mixins: nos permiten reutilizar y parametrizar trozos de código css para simplificar muchas tareas.
- selector de herencia: podemos heredar propiedades de otro selector y asi no repetir código
Vamos a verlo en acción. Un ejemplo usando mixins y variables para poner un borde redondo en cualquier navegador
estilo.scss
@mixin vendor-prefix($name, $argument)
{ #{$name}: $argument;
-webkit-#{$name}: $argument;
-ms-#{$name}: $argument;
-moz-#{$name}: $argument;
-o-#{$name}: $argument;
}
.redondo {
@include vendor-prefix(border-radius, 1px 1px 1px 1px)
}
Este seria el resultado
estilo.css
.redondo {
border-radius: 1px 1px 1px 1px;
-webkit-border-radius: 1px 1px 1px 1px;
-ms-border-radius: 1px 1px 1px 1px;
-moz-border-radius: 1px 1px 1px 1px;
-o-border-radius: 1px 1px 1px 1px; }
Vamos ahora a anidar selectores, para que veais la diferencia de limpieza
estilo.scss
.estiloBorde
{ border:
{ style: solid;
left: { width: 2px; color: #ff0000; }
right: { width: 2px; color: #00ff00; }
}
}
Este seria el resultado
estilo.css
.estiloBorde {
border-style: solid;
border-left-width: 2px;
border-left-color: #ff0000;
border-right-width: 2px;
border-right-color: #00ff00; }
Que es Compass
Compass es un framework Css que simplifica muchas tareas de diseño. Está escrito en Ruby y utiliza Sass internamente.
Trae un monton de mixins preparados para que los utilicemos directamente en los proyectos.
Solo tendremos que invocar el mixin que queramos usar.
Podeis consultarlos en su documentacion : Mixins de Compass
Veamos un ejemplo de uso con el mixin box-shadow
box{
width:500px;
height:350px;
@include boder-radius(5px);
@include box-shadow($shadow-1);
}
El resultado seria un borde con sombra que funciona en todos los navegadores
box{
border:1px solid black;
height:500px;
width:350px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
box-shadow:0px 1px 0px 1px black;
-webkit-box-shadow:0px 1px 0px 1px black;
-moz-box-shadow:0px 1px 0px 1px black;
}
Como trabajar con Sass y Compass
Cuando trabajamos con Sass, estamos escribiendo código en ficheros .scss. Debemos realizar una precompilacion para generar los ficheros css.
Sass utiliza Ruby para compilar el código, por lo que es necesario tener instalado en nuestra máquina Ruby.
Linux y Mac traen ya instalado Ruby, sin embargo en Windows será necesario instalarlo (RubyInstaller).
Para instalar Sass (previamente instalado Ruby) abre una terminal o consola de Msdos y escribe
gem install sass
Para instalar Compass (previamente instalado Ruby), escribe en terminal
gem install compass
Integrar Sass y Compass en un proyecto Java
Y ahora que ya tenemos claro qué es Sass, qué es Compass y por qué nos va a venir bien incluirlo en un proyecto, os cuento como integrarlo en Java.
Vamos a usar y configurar el plugin sass-maven-plugin dentro de nuestro pom.xml.
Será necesario indicarle la ruta de nuestros ficheros .scss y la ruta destino donde queramos que nos genere el .css
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
<executions>
<execution>
<id>generate-css</id>
<phase>generate-resources</phase>
<goals>
<goal>update-stylesheets</goal>
</goals>
<configuration>
<sassSourceDirectory>${basedir}/src/main/scss</sassSourceDirectory>
<destination>${project.build.directory}/css</destination>
</configuration>
</execution>
</executions>
</plugin>
Integrar Sass y Compass en un proyecto Javascript
Para automatizar las tareas de compilado de sass vamos a usar Grunt haciendo las mismas tareas que hemos hecho anteriormente con Maven
Si no estais familiarizados con proyectos node, podeis consultarlo en post anteriores (Proyectos Node) (Node)
Necesitaremos instalar 2 paquetes que indicaremos en el package.json
- grunt-contrib-sass: tarea para compilar ficheros .scss y generar .css
- grunt-contrib-watch: tarea que estará observando si algun fichero cambia para volver a compilar y generar los ficheros .css
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-sass": "~0.3.0",
"grunt-contrib-watch": "~0.4.4"
}
Ahora solo nos queda indicarle a grunt como trabajar con sass. Para ello en el fichero Gruntfile.js
compass: {
dev: {
src: 'sass',
dest: 'css',
linecomments: true,
forcecompile: true,
debugsass: true,
images: '/path/to/images',
relativeassets: true
}
},
sass: {
dist: {
files: {
'css/style.css' : 'sass/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass', 'compass:dev']
}
}
Os dejo un ejemplo de cada uno colgado en github
https://github.com/rocimunoz/sass
Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.
Connect
2 Responses to “Integrar Sass y Compass en proyectos web”