Front End Developer

Como instalar SASS

As tecnologias front-end estão sempre evoluindo e mudando e dia após dia sempre surge algo novo algumas coisas são importantes outras irrelevantes, algumas são ajudam e melhoram nossa produtividade e outras nem tanto, isso mostra que o trabalho do front-end também e saber minerar as novidades que lhe são apresentadas dia após dia. Neste poste venho demonstras as configurações iniciais do SASS, uma tecnologia fantástica e uma ferramenta que não pode faltar na caixa de um bom front-end.

Vamos começar a montar o ambiente e depois um teste rápido. Primeiramente devemos entender que o SASS é uma gem do ruby e para utilizar-lo devemos baixar o RubyInstaller. Clicando no link abaixo você poderá baixar a versão que mais se adequá os seu sistema operacional, lembando que no caso dos usuários de MAC não ha a necessidade esta necessidade pois o Ruby já vem rodando de maneira nativa.

Baixe aqui o RubyInstaller

 

Aceite os temos da licença do Ruby

 

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

 

Aguarde a instalação

 

 

Clique em Finish , e pronto o Ruby já esta instalado.

 

 

Apos a instalação dê uma verificada se está tudo funcionando dentro dos conformes, indo no prompt / terminal (Win+R > cmd) e dando o comando:

ruby -v

Deve aparecer a como na imagem abaixo:

 

 

Instalando 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.

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

sass -v

 

Testando o SASS

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;
}

 Compilando 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.

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; }

 

Além da sua ajuda na produtividade do front-end a tecnologia SASS possui muitos outros recursos no qual veremos nos próximos posts.

«
»

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *