Compass y Sass, Configuración y uso
Importante: Este artículo hace referencia a Sass como la sintaxis usada en archivos .scss no .sass.
Configuración
Instalación
Para instalar Compass ver Compass y Sass, Instalación.
Configurar un proyecto
Para configurar un proyecto que use Compass se usa un archivo config.rb que debe estar ubicado en la carpeta desde donde se ejecuta el programa. Este comportamiento se puede sobre escribir usando el parámetro -c archivoDeConfiguracion
.
Usar Compass con NetBeans
Se puede configurar NetBeans para que transforme los archivos de Compass al ser modificados y salvados. Para esto hay que entrar en Preferencias/Miscellaneous/CSS Prepropcessors y rellenar el campo que dice "Sass Path:" con lo siguiente:
/usr/bin/sass --compass
Esta parte de NetBeans está pensada para Sass, el proyecto sobre el cual se basa Compass y para hacer que Sass funcione como compass se le pasa el argumento --compass. Es posible que esto no funcione en todos los casos, pero en el momento de escribir esto no se vieron problemas de compatibilidad entre compass y sass --compass.
Probado con:
- NetBeans 8.0
Syntaxis
Comentarios
Se pueden usar comentarios en Sass de la forma:
/* comentario */
, este tipo de comentario es pasado al archivo generado.// comentario
, este tipo de comentario no es pasado al archivo generado.
@import (importar archivos)
Sass permite importar archivos con lo que se puede logar:
- Crear un solo archivo a partir de varios.
- Reutilizar código en diferentes partes.
Para importar se usa el comando @import
junto al archivo a importar.
Nota: Por defecto Compass genera archivos .css adicionales para cada archivo importado, si no es el comportamiento deseado usar partials (más abajo).
Ejemplo:
/* inserta el contenido del archivo foo.scss en el actual */
@import "foo.scss";
Partial (archivos parciales)
Los partials son archivos que no se generan al momento de compilar y esto es util para no crear archivos innecesarios.
/* inserta el contenido del archivo _foo.scss en el actual */
@import "_foo.scss";
Nested import
Se puede importar archivos adentro de un definición de css.
a {
@import "_foo.scss";
}
Variables
Las variables deben empezar con $.
$width: 5em;
#main {
width: $width;
}
Nesting (anidado)
La idea del nesting es especificar el estilo para un selector y adentro de la especificación agregar información para otro selector. Esto hace que se cree información para el primer selector y luego para el segundo selector solo cuando este se encuentra adentro del primero. De esta forma, se ahorra tiempo de escritura, el código generado es limpio y la lectura del CSS se hace sencilla.
Por ejemplo para obtener este código:
.post {
border-radius: 3px;
background: #FFF8FF;
border: 1px solid #EFC6F3;
padding: 15px;
color: #333333;
}
.post .title, .post .alt-title {
color: #000000;
font-size:20px;
}
.post .alt-title {
border-bottom:1px solid #EFC6F3;
}
Se puede usar el siguiente código de Sass:
$border: 1px solid #EFC6F3;
.post {
border-radius: 3px;
background: #FFF8FF;
border: 1px solid $border;
padding: 15px;
color: #333333;
.title {
color: #000000;
font-size:20px;
}
.alt-title {
@extend .title;
border-bottom:1px solid $border;
}
}
Mixins (estilos reusables)
Los Mixins son bloques de estilos que se puede utilizar en diferentes partes del .scss.
Por ejemplo el siguiente es un mixin llamado large-text.
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
El uso del mixin anterior podría ser como el siguiente ejemplo.
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
El resultado sería el siguiente.
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px; }
De acuerdo al ejemplo, cada vez que necesite formatear algo como large-text solo necesito usar el mixin.
Herencia
En Sass se puede heredar el estilo de otro elemento usando el comando @extend
, además permite agregar estilo adicional luego de la herencia.
El siguiente código:
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
Genera el siguiente css.
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
Referencias
- http://sass-lang.com/, sitio oficial de Sass.
- http://sass-lang.com/documentation/, documentación de Sass.
- http://compass-style.org/, sitio oficial de Compass.
- http://thesassway.com/, tutoriales.