Configurando um ambiente com SASS/Compass

Instalação

Atualize o rubygems e instale o Compass, o SASS é instalado automáticamente.

sudo gem update --system
sudo gem install compass

Exemplo de estrutura para o projeto

html
	|-- index.html
	|-- config.rb
	`-- static
	|-- img
	|-- js
	`-- scss

Configuração do Compass

É necessário um arquivo de configuração config.rb para que o Compass funcione corretamente, segue um exemplo:

css_dir = "static/css"
sass_dir = "static/scss"
images_dir = "static/img"
javascripts_dir = "static/js"

if environment == :production
	http_path = "http://static.example.com/"
	http_images_path = "http://static.example.com/static/img"
	http_generated_images_path = "http://static.example.com/static/img"
	output_style = :compressed
	line_comments = false
else
	http_path = "/"
	http_images_path = "/static/img/"
	http_generated_images_path = "/static/img/"
	output_style = :expanded
end

Para compilar o SCSS em CSS execute o comando no diretório do arquivo config.rb:

compass compile

Para compilar usando as configurações para produção:

compass compile -e production

Para compilar em tempo real use o comando:

compass watch

Para ver todos os comandos disponíveis

compass -h

Instalando plugins do Compass

O Compass possui alguns plugins que podem ser utilizados no projeto como por exemplo o ceaser-easing para animações usando CSS3.

para instalar um plugin por exemplo o ceaser-easing:

sudo gem install ceaser-easing

Depois adicione a seguinte linha no config.rb:

require "ceaser-easing"

carlosrberto/sass.md

Configurando um ambiente com SASS/Compass

Instalação

Exemplo de estrutura para o projeto

Configuração do Compass

Instalando plugins do Compass

Plugins para Sublime Text

Plugins para Firefox

Mais informações

Sites oficiais

Links para estudo