#1 - Conhecendo o pré-processador SASS | Instalação
Publicado há 5 anos por Fernando Moreira.Tempo de leitura: 3 minutos - 510 palavras.Na minha opinião todo desenvolvedor web deveria conhecer algum pré-processador CSS, seja ele Less
, SASS
, Stylus
ou qualquer outro.
Hoje vou começar uma série de artigos com algumas dicas sobre o pré-processador SASS... sei que existem muitos tutoriais e artigos bacanas por ai, mas eu vou explicar o meu ponto de vista sobre essa forma de escrever CSS.
O que é um pré-processador?
Um pré-processador é um programa que recebe texto e efectua conversões léxicas nele. As conversões podem incluir substituição de macros, inclusão condicional e inclusão de outros ficheiros. Google.com (https://goo.gl/OeWJWB)
Pense num pré-processador como uma nova linguagem para escrever CSS.
Chame de tradutor de linguagem, ou de compilador.. não tem problema, tudo vira CSS no final.
Mas o que é esse tal de SASS?
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com
Resumidamente, SASS é um pré-processador de CSS. Com ele você tem vários recursos que não existem nativamente no CSS, como:
- variáveis
- funções
- includes
- mixins
- condicionais (if, else)
- repetições (for)
- entre outras coisas legais...
Com ele você consegue organizar o seu CSS de forma modular, deixar cada componente em arquivos separados e usando @import
importar todos em apenas um arquivo.
Usando herança e variáveis você esquece o famoso Ctrl+C
e Ctrl+V
.
Cara isso é magnífico, mesmo!
Ok, entendi, agora como eu uso o SASS?
Nosso amigo SASS é uma RubyGem então você precisa ter o Ruby instalado em seu computador.
A instalação é bem simples, tendo o Ruby instalado e funcionando basta rodar o comando abaixo:
sudo gem install sass
Se nada falhar você já tem o SASS instalado em sua máquina, rode sass -v
do seu terminal para certificar que tudo ocorreu bem.
123 testando..
Vamos criar um arquivo SASS para teste.
Abra o seu editor favorito, crie um novo arquivo com o seguinte código:
$cor: #006699;
$bg: #f1f1f1;
body {
background-color: $bg;
font-size: 16px;
}
a {
color: $cor;
&:hover,
&:focus {
text-decoration: none;
border-top: 1px dashed $cor;
}
}
Depois salve com a extensão .scss
com o nome que preferir.. eu salvei como style.scss
.
No terminal rode:
sass --watch style.scss:style.css
No código acima nós executamos o SASS passando o parâmetro --watch
para que ele fique assistindo nosso arquivo style.scss
, assim a cada Ctrl+S
que damos no arquivo ele executa e processa nosso CSS final.
O código processado ficou assim:
.box {
background-color: #f1f1f1;
font-size: 16px;
}
.box p {
margin: 0;
}
a {
color: #006699;
}
a:hover, a:focus {
text-decoration: none;
border-top: 1px dashed #006699;
}
Incrível não?!
Esse é só o começo de uma longa jornada com o Pré-processador SASS, logo vou explicar detalhes do código acima e muito mais.
Aguardem..
- Conhecendo o pré-processador SASS - Instalação
- Conhecendo o pré-processador SASS - Variáveis
- Conhecendo o pré processador SASS - Mixins
- Conhecendo o pré processador SASS - Funções
- Conhecendo o pré-processador SASS - Placeholder