Sass cubre los huecos de CSS añadiendole todo lo que le falta, haciendolo un lenguaje más inteligente, escalable y reutilizable.

Sass es una gema de Ruby y viene incluido con Ruby on Rails desde la versión 3.1 como lenguaje por defecto para escribir estilos.

  • Variables
  • Anidamiento
  • Herencía entre selectoress
  • Funciones y estructuras de control
  • Operaciones lógicas
  • Mixins

Que es Compass?

Compass es una librería para Sass.
Que nos ofrece Compass?

  • librería de mixins
  • Funciones para Sass
  • Extensiones

Por que necesito todo esto?

  • Cada vez hacemos sitios web más grandes y complejos y necesitamos nuevas herramientas para hacerlos manejables y mantenibles.
  • Sass es un metalenguage que se usa para definir el estilo del documento de forma limpia y estructurada.
  • Sass es una extension de CSS3 por lo que cualquier documento CSS3 es un documento SCSS valido.
  • Sass sigue el principio de DRY (Don't Repat Yourself).

Lo que necesitas antes de empezar:

  • Sass está hecho en Ruby, por lo que necesitarás tenerlo instalado en tu máquina.
  • En Windows puedes utilizar: rubyinstaller.
  • En Linux puedes utilizar el sistema de gestión de paquetes apt o puede que esto te resulte útil: rails ready
  • En OS X estás de suerte, Ruby ya viene por defecto!

Instalación de Sass y Compass

Terminal Lovers

Sass y Compass se instalan como gemas de Ruby.
Puedes instalar solo Sass de este modo: $ gem install sass.
Si te da un error es posible que necesites los permisos de administrador, utiliza: $ sudo gem install sass.
Para comprobar que se ha instalado correctamente escribe: $ sass -v.
Para decirle a Sass que “vigile” si hay cambios y compile nuestros archivos .scss en nuestro archivo .css escribimos: $ sass --watch tu_carpeta_sass:tu_carpeta_css

Compass ya lleva Sass incorporado, por lo que no tienes que instalarlo aparte.
Utilzar Compass es una manera fácil de empezar con Sass, cuando creas un proyecto nuevo, Compass te crea las carpetas necesarias para tus archivos .scss/.css así como un archivo config.rb donde puedes indicar distintos paramentros de configuración.

Instalar Sass y Compass abre la terminal en Linux / OS X o Command Prompt en Windows y escribe:

$ gem install compass

Comprobar que se ha instalado correctamente:

$ compass version 

Crear un proyecto con Compass:

$ compass create nombre-del-proyecto 

Compilar Sass y decirle a Compass que vijile si hay cambios (ejecutar desde el directorio raiz de tu proyecto)

$ compass watch 

Aplicaciones GUI (graphical user interface):

Gratuítas:

De pago:

Mi consejo?

Utiliza la terminal!

Aplicaciones como Mixture o Codekit pueden resultarte útiles, pero si lo único que quieres es compilar Sass, no me parece necesario.
Todo lo que tienes que hacer es Abrir la terminal, navegar hasta tu proyecto y escribir compass watch para que Compass compile tus archivos scss en css.
Además en el desarrollo web moderno la terminal es una herramienta que se utiliza constantemente por lo que aprender su funcionamiento básico te resultará útil.

Si tu editor no colorea el codigo .scss por defecto, puedes probar con uno de estos pluguins:

Enlaces útiles: