Compass y Sass, Configuración y uso

From Wiki de Caballero
Jump to navigation Jump to search

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";

Más info.

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;
}

Más info

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;
  }
}

Más info.

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.

Más info

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;
}

Más info

Referencias