Introdução a Sass: Instalando Ruby e Visual Studio Code

1 – Instale o Ruby

Primeiro fazer download do RubyInstaller, procure na lista a versão compatível com seu sistema operacional. Durante a instalação marque a opção Marque a opção “Add Ruby executable to your PATH”

2 – Confira a Instalação

Abra o Visual Studio Code, e exiba o terminal no menu View > Integrated Terminal.
Na Aba terminal digite o comando:

ruby -v

O terminal ira exibir a versão do ruby.

3 – Agora Instale o Sass

Ainda no terminal do Visual Studio Code digite o comando:

gem install sass

4 – Verifique a instalação

sass – v

O terminal ira exibir a versão do Sass.

5 – Hora de testar

Agora que esta tudo instalado comece fazendo seu primeiro Sass.

Crie seu arquivo.html e na pasta “css” crie o seu arquivo estilo.scss, mais lembre-se quando for colocar a url para chamar na tag head do html insira o nome do arquivo já em formato compilado, ou seja, estilo.css

ex:  <link rel=”stylesheet” href=”css/estilo.css”>

No seu estilo.scss crie sua primeira classe com variavel.

$color-black: #000000;

.classe {
color: $color-black;
}

6 – Compilando o Sass

Agora que você já tem seu html e seu arquivo sass, no terminal do Visual Studio Code digite o seguinte comando para compilar o arquivo estilo.scss e transformar ele em um arquivo estilo.css

sass estilo.scss:estilo.css

Esse comando é um comando manual, mas você também pode deixar o terminal fazer sempre automaticamente quando você salvar o arquivo, digite o comando abaixo no terminal:

sass –watch estilo.scss:estilo.css

Assim fica bem mais facil trabalhar, basta apenas salvar o seu arquivo e ver o resultado.

7 – Observando o CSS

Agora se você quiser pode ir lá na sua pasta “CSS” e ver o arquivo que foi compilado e se transformou no estilo.css

8 – Conclusão

Agora é só aproveitar e criar seus CSS com mais facilidade usando todos os recursos do Sass, este artigo é apenas introdutório procure na internet cursos e artigos sobre tudo que o Sass pode fazer por você.