Configurando o Ruby no Windows para trabalhar com Sass

Neste artigo vamos analisar como configurar o Windows para trabalhar com a liguagem de programação Ruby que é o motor de compilação para arquivos Sass e Scss. Este artigo complementa o artigo anterior do blog que analisa o funcionamento do Sass.

Antes de começar a utilizar Sass no Windows você precisa ter o Ruby instalado em seu sistema. A maneira mais fácil de ter o Ruby no Windows é instalando o RubyInstaller, que facilita o processo de configuração da linguagem no Windows e abilita o uso do prompt de comando como compilador de arquivos sass/scss.

Prompt como compilador

Não existe segredo na instalação deste pacote, basta baixar, executar e instalar, sendo assim, o tutorial se inicia a partir do momento em que este programa está instalado.

Após efetuar a instalação do RubyInstaller, será criada a seguinte pasta em todos os programas do menu iniciar:

Pasta de instação do RubyInstaller

Destes itens criados, utilizamos a linha de comando/command prompt. Também pode ser utilizado o prompt do Windows.
Ao executar este item é apresentada a seguinte tela:

Linha de comando Sass

Nessa tela que iniciamos um projeto em ruby e que manipulamos a linguagem. No nosso caso vamos executar a instalação do pacote de compilação do Sass, inserindo o seguinte comando gem install sass. Feito isso o terminal deve apresentar as seguintes informações:

Linha de comando Sass

Para confirmar se o pacote foi devidamente instalado você pode executar o comando sass -v que vai retornar a versão do pacote na próxima linha.

Feito isso, temos instalado o Ruby com o pacote para compilar arquivos Sass, agora vamos analisar como utilizar o pacote do Sass para compilar os arquivos Sass/Scss em CSS.

Agora temos que apontar o prompt para a pasta onde se encontra seu arquivo sass/scss. No meu caso, aloquei os arquivos em uma pasta teste na raiz da unidade C.

Linha de comando Sass

O próximo passo é fazer com que o compilador monitore seu arquivo sass/scss. Isso é necessário para que o compilador Ruby transforme seu arquivo sass/scss em css toda vez que você atualizar o mesmo.

Execute o comando sass –watch styles.scss:styles.css – esse comando orienta o compilador a monitorar o arquivo style.scss, compilando o mesmo para o arquivo css de mesmo nome, toda vez que o arquivo scss for atualizado.

Linha de comando Sass

Note que o prompt informa que está monitorando mudanças no arquivo, então agora vamos escrever um pouco de Sass para testar.

No arquivo Scss, inserimos as seguintes linhas:


$blue: #3bbfce;  
$margin: 16px;  
.content-navigation {  
border-color: $blue;  
color:  
darken($blue, 9%);  
}  
.border {  
padding: $margin / 2;  
margin: $margin / 2;  
border-color: $blue;  
}

O seguinte arquivo CSS é gerado após ação do compilador:


.content-navigation {  
  border-color: #3bbfce;  
  color: #2ca2af;  
}  
.border {  
  padding: 8px;  
  margin: 8px;  
  border-color: #3bbfce;  
}

Note que para cada mudança efetuada no arquivo sass/scss (após salvar o arquivo) o prompt detecta a mudança e automaticamente compila o arquivo CSS novamente. Outro fator importante é que no arquivo HTML você não aponta o arquivo sass/scss e sim o arquivo compilado CSS.

Linha de comando Sass

Utilizando compiladores de terceiros

Uma alternativa para que não se familiariza com o compilador via prompt, é utilizar compiladores de terceiros. Existe uma série de softwares de terceiros que compilam arquivo sass/scss através de uma interface gráfica no Windows exatamente da mesma forma que o prompt porém sem a necessidade de executar comandos via terminal, você apenas aponta o arquivo sass/scss e aciona o modo “auto-compile” para que a cada mudança no arquivo sass/css seja gerado um arquivo CSS atualizado.

Abaixo segue uma lista com os repectivos softwares, como consta na documentação oficial do Sass (http://sass-lang.com/install).

  • CodeKit – Software pago / MacOS
  • Compass.app – Software Open Source / Windows MacOS
  • Hammer – Software pago / MacOS
  • Koala – Software pago / MacOS Windows
  • LiveReload – Software Open Source / MacOS Windows
  • Mixture – Software Pago / MacOS Windows
  • Prepos – Software Open Source / MacOS Windows
  • Scout – Software Open Source / MacOS Windows

Não vou entrar em detalhes nos programas de terceiro visto que todos possuem um funcionamento similar ao prompt, porém com interface gráfica, onde apenas é necessário apontar o arquivo sass/css e onde deve ser salvo o arquivo css compilado.

Qualquer duvida em relação ao artigo ou em relação aos softwares informados, estou inteiramente a disposição via comentários.

🙂