Introdução ao Sass Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 1 ano, 2 meses, 1 semana, 3 dias atrás.

Eu não tenho muito material de front-end aqui no WebDevBr, mas o que muitos não sabem é que eu comecei minha carreira como dev front-end e até hoje me atualizo nesta área e uma das melhores coisas que fiz foi aprender Sass para gerar meu CSS.

É simples, você escreve em arquivos scss e com um comando já gera o css da forma que precisa, o começo é leve e sem dor, já que o scss aceita qualquer css muito bem.

o Sass soma muitos recursos ao CSS, como Mixins, Variáveis, Hierarquia, Partials (meu preferido, rsrs), mas vamos por partes, primeiro vamos conhecer ver como instalar.

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

Instalando o Sass

Existem duas formas de se instalar o Sass e a forma como você trabalha vai definir o que é mais interessante pra você, eu trabalho com Ruby de vez em quando então pra mim foi indiferente e acabei fazendo a instalação com Ruby sugerida no site oficial, esta é a forma que vou abordar aqui, mas saiba que existe a LibSass e da pra usar no Node, PHP, .Net e até no navegador (credo, pra esse último).

Se você utiliza sistemas baseados em Unix vai instalar o Ruby utilizando a linha de instalação para seu sistema operacional:

#Debian ou Ubuntu
sudo apt-get install ruby-full

#CentOS, Fedora ou RHEL
sudo yum install ruby

#Gentoo
sudo emerge dev-lang/ruby

#Arch Linux
sudo pacman -S ruby

#OS X
brew install ruby

Todos os comandos foram retirados da documentação oficial do Ruby.

Para instalar o Ruby no Windows recomendo (e a documentação do Sass também) o pacote Ruby Installer, é um simples instalador estilo avança, avança e confirma.

Para finalmente instalar o Sass, vá até o terminal (CMD, Prompt, Tela preta que digita letrinhas...) e:

sudo gem install sass

E no fim rode este comando para testar:

sass -v

A saída deve ser algo como Sass 3.4.22 (Selective Steve).

Se você se perguntou "Ei! Então é um "gem" do Ruby?!", respondo que sim, o Sass é uma "gema" para o Ruby.

Gerando CSS com Sass

O fato é que o navegador não renderiza o Sass nativamente, preciso gerar um arquivo css, pra isso rodamos o seguinte comando:

sass --watch style.scss:style.css

E ele vai pegar o arquivo style.scss e gerar um style.css, a diferença é na extenção, presta atenção pra você ver.

O parâmetro --watch faz o Sass ficar em espera e aguardando alterações, assim você não precisa ficar rodando o comando toda hora, qualquer dia destes vou colocar aqui no WebDevBr uma dica de como rodar isso com Live Server no Grunt, é lindo trabalhar vendo CSS minificado, Javascript minificado e o reload da página automático em cada alteração, lembra do ctrl+tab pra trocar entre editor e navegador, puxa, com dois monitores você não vai mais precisar disso.

A grande questão é o "estilo de geração" deste css, ele pode ser de 4 formas diferentes:

  • nested
  • compact
  • expanded
  • compressed

É só escolher um e colocar --style [formato] na frente do comando, assim:

sass --watch style.scss:style.css --style compressed

E prontinho!

Vamos entender a diferença entre cada um destes formatos, o arquivo Sass em questão será:

.widget-social {
        text-align: right;

        a,
        a:visited {
                padding: 0 3px;
                color: #222222;
                color: rgba(34, 34, 34, 0.77);
         }

        a:hover {
                color: #B00909;
        }

}

Exemplo retirado de https://web-design-weekly.com/2014/06/15/different-sass-output-styles/.

Nested

.widget-social {
    text-align: right; }
    .widget-social a,
    .widget-social a:visited {
        padding: 0 3px;
        color: #222222;
        color: rgba(34, 34, 34, 0.77); }
    .widget-social a:hover {
        color: #B00909; }

Expanded

.widget-social {
    text-align: right;
}
.widget-social a,
.widget-social a:visited {
    padding: 0 3px;
    color: #222222;
    color: rgba(34, 34, 34, 0.77);
}
.widget-social a:hover {
    color: #B00909;
}

Compact

.widget-social { text-align: right; }
.widget-social a, .widget-social a:visited { padding: 0 3px; color: #222222; color: rgba(34, 34, 34, 0.77); }
.widget-social a:hover { color: #B00909; }

Compressed

.widget-social{text-align:right}.widget-social a,.widget-social a:visited{padding:0 3px;color:#222222;color:rgba(34,34,34,0.77)}.widget-social a:hover{color:#B00909}

Conclusão

Sass é uma ferramenta incrível que deverá fazer parte de seu arsenal com certeza, outra alternativa interessante é o Less, mas o importante é você ter algo do gênero para gerar seu CSS enquanto mantém uma organização de arquivos interessante.

Enquanto não sai um curso, artigo ou algo assim aqui no WebDevBr de uma olhada aqui na documentação para se aprofundar.


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!