Tutorial: instalando e usando o Sass no Windows

Uma coisa que eu achava antes de mexer com Sass é que eu precisava usar Linux ou Mac, ou que daria muito trabalho instalar tudo no meu PC.
Mas dá pra trabalhar com Sass no Windows sim!

E a galera pediu no post “CSS menos sofrido com Sass” um guia de como trabalhar com Sass no nosso sistema operacional do coração.
Primeiramente mostro como preparar o ambiente e depois um teste rápido.
Então segue um guia de como instalar o Sass no Windows:

1 – Instale o Ruby

Baixe aqui o RubyInstaller de acordo com a sua versão* do Windows e instale se preocupando com a observação da imagem abaixo:

instalando ruby windows

Cuidado: Marque a opção “Add Ruby executable to your PATH”!


* Se não souber  se o seu Windows é 32 ou 64 bits, basta dar o atalho Win+PauseBreak. Será mostrada uma tela com informações do seu sistema, e em “Tipo de sistema”, a versão que você tem instalada.

2 – Confira se está tudo bem

Dê uma conferida se está tudo bem até agora, indo no prompt / terminal (Win+R > cmd) e dando o comando:

ruby -v

Deve aparecer a versão do Ruby como na imagem abaixo:

verificar versao ruby

Não esquente se a versão estiver um pouco diferente.

3 – Ruby instalado, instale o Sass

No prompt mesmo, dê o comando:


gem install sass

Se deu algum erro, confere se o Ruby está instalado mesmo e/ou tenta instalar manualmente a gem.

4 – Verifique o Sass

Aquela conferida básica para ver se o Sass foi instalado mesmo:

sass -v

Deve aparecer a versão do Sass instalada:

verificar versao sass

5 – Ambiente todo ok, agora um teste!

Crie uma pasta para teste.
Dentro dela crie um arquivo chamado “teste.scss”.
E nesse arquivo, coloque um código como esse:

$cor-legal: #BADA55;

.course {
  color: $cor-legal;
}

6 – Compile o Sass

Agora na pasta de teste, abra o prompt digitando “cmd .” (sem aspas) na barra de endereços.
O prompt vai abrir direto na pasta.
Agora compile o arquivo scss em um arquivo CSS com o comando:

sass teste.scss:teste.css

O ideal é não ter que compilar na mão, mas como estamos testando não tem problema.

7 – Dê uma conferida no CSS

Se foi tudo ok até aqui, foi gerado um teste.css na sua pasta.
Dé uma conferida se ele está parecido com esse:


.course {
  color: #BADA55; }

8 – Agora é só alegria! Tranquilo, né? 🙂

Outros sistemas operacionais?

Se você usa Mac, o Ruby já vem instalado, só instalar o Sass do mesmo jeito que mostrei.
Se você usa Linux, o comando “\curl -sSL https://get.rvm.io | bash -s stable” (sem aspas) instala o Ruby para você.

O Sass não é só variáveis

Eu explico as principais features do Sass no curso da Alura, dá uma olhada no conteúdo do curso de Sass. Escrevi também um livro de Sass em que mostro essa fantástica ferramenta.
Conseguiu instalar e testar 100%? Teve algum problema?

19 Comentários

  1. Patrycki Bianco 13/02/2016 at 09:23 #

    Muito bom! Tutorial simples, direto e de grande ajuda.

  2. Natan Souza 13/02/2016 at 09:26 #

    Valeu, Patrycki! Espero que motive você e outros devs a darem uma chance para o Sass.

  3. Augusto 20/03/2016 at 10:25 #

    no arquivo teste.css não apareceu o código, mas copiei o que vc colocou e ficou tudo nos conformes, espero que o sass funcione pois uso o sublimetext 3

  4. Natan Souza 24/03/2016 at 12:25 #

    Oi Augusto, que bom que foi! Fica tranquilo que eu usava o Sublime até uns dias atrás e sempre foi de boas.

  5. Gustavo Guimarães 08/04/2016 at 17:00 #

    “O ideal é não ter que compilar na mão, mas como estamos testando não tem problema”.
    Qual seria o ideal?

  6. Natan Souza 08/04/2016 at 17:12 #

    Oi Gustavo. O ideal seria você usar algum task runner como o Gulp ou o Grunt para compilar automaticamente para você. Outra forma é dando o comando ‘sass –watch teste.scss:teste.css’. No Alura eu mostro no curso de Sass com esse segundo jeito. Abcs!

  7. Rafael 12/06/2016 at 23:09 #

    Ola, não consegui fazer o scss funcionar. Eu uso o Brackets para escrever os códigos, na hora em que fui colocar o no prompt “sass teste.scss:teste.css” ele deu a seguinte mensagem: “Errno: ENOENT: No such file on directory @rb_sysopen – teste.scss”. O que devo fazer?

  8. Natan Souza 13/06/2016 at 13:49 #

    Rafael, uso o Brackets também, ele não influenciaria nisso, ok? Achei esses dois links que podem te ajudar (esse e esse). Outra alternativa seria postar uma dúvida no GUJ também. Abcs!

  9. Patrícia 20/06/2016 at 16:54 #

    Ótimo! Consegui fazer certinho.

  10. Henrique 23/06/2016 at 01:06 #

    Parabéns pelo post. Muito bem explicado!

  11. Renato Brito 13/08/2016 at 15:22 #

    Parabéns pelo post Natan! vou procurar acompanhar sempre.

  12. Jordani da Silva 03/09/2016 at 18:28 #

    Muito util Natan! Valeu!

  13. Valdemir 15/09/2016 at 22:16 #

    Pessoal, existe alguns softwares que fazem essa compilação para você.
    Só precisa colocar a pasta onde está o projeto (Html, CSS, JS) no software e configurar como irá querer a saída do css.

    Além disso, há opção de também renderizar seu css com auto-prefixos (quando utilizar features do CSS3). A grande vantagem disso é não precisar usar um request de servidor para usar o Autoprefixer ou PrefixFree, por exemplo, ou baixar algum desses em seus projetos (o que também vai gerar mais um request).

    Compiladores:
    Prepros
    Koala
    Compass
    Scout

    Uso o Prepos (pago) e recomendo! Vale lembrar que os compiladores não só renderizam Sass ou Less, mas uma infinidade de linguagens, tais como, JavaScript, Jade etc.

    Vejam o canal desse cara aqui que tem bastante coisa que ele faz usando Jade e Sass.

    https://www.youtube.com/user/DevTipsForDesigners

    Abraço

    Abraços

  14. ALEXANDRO WILLIAN HERVIS 08/11/2016 at 14:48 #

    Valeu mesmo, Caelum sempre nos ajudando muito.

  15. Luiz Duarte 25/11/2016 at 16:59 #

    Vlw pelo tutorial Natan,

    Ocorreu um erro aqui no Windows 10

    ERROR: Could not find a valid gem ‘compass’ (>= 0), here is why:
    Unable to download data from https://rubygems.org/ – SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://rubygems.org/latest_specs.4.8.gz)

    Consegui solucionar com o seguinte -> https://gist.github.com/eyecatchup/20a494dff3094059d71d#solution-1-change-default-source-host-from-https-to-http

    Com isso consegui instalar o sass pelo cmd… Se alguém tiver problemas fica o caminho.

    Abç.

  16. Fernanda Santos 07/02/2017 at 17:00 #

    Muito bom. Obrigada

  17. Jamille 21/02/2017 at 23:35 #

    Tutorial simples e bem objetivo. Nota 10.
    Eu tinha a sensação de ser algo chato e demorado, porém foi rápido e divertido fazer a instalação do Sass no Windows.

  18. Jeniffer 20/03/2017 at 17:51 #

    Ajudou pra caramba! Valeu!

Deixe uma resposta