Nenhum produto encontrado nessa seleção.
Nesse artigo, você vai aprender a trabalhar com sass para gerar seus arquivos CSS com mais rapidez e facilidade. É recomendado que você leia o artigo instalando o sass antes de continuar esta leitura, pois, iniciaremos exatamente do ponto em que paramos naquele artigo.
Se você chegou até aqui, provavelmente já deve ter lido sobre as maravilhas que o SASS traz para seu CSS, certo? Por isso não vou entrar em detalhes sobre isso no texto abaixo.
Tenho em mente que o modo mais fácil para aprender algo é praticando, e com sass não é diferente, então pratique, siga os exemplos de códigos, altere-os e veja o que acontece.
Se tiver dúvidas, basta perguntar nos comentários.
Sass ou Scss?
Existem dois formatos para você escrever CSS em sass: o próprio “sass”, e o “scss”.
Particularmente, eu apenas utilizo o formato “scss”, nunca tentei utilizar o formato “sass”, e não sei dizer exatamente, os benefícios de um ou de outro.
Se você tiver interesse em saber a diferença, pode ler o artigo (em inglês):
Por este motivo, iremos utilizar apenas o formato scss, que suporta qualquer estilo que você utilizaria em seu CSS comum, incluindo os poderes do sass.
Meu primeiro arquivo sass
Para criar seu primeiro arquivo sass, você deve utilizar um editor de textos para desenvolvimento. Como sempre, recomendo a utilização do Notepad++; grátis e prático.
Depois da instalação, abra o Notepad++, crie um novo arquivo com a extensão “.scss“, e salve na pasta que preferir.
Para meu exemplo, vou criar um arquivo chamado “main.scss“, em uma pasta chamada “sass“, dentro da pasta “css” do meu projeto.
./css/sass/main.scss
Assistindo alterações no arquivo
Temos que fazer com que o sass “assista” (watch) qualquer alteração em nosso arquivo “scss” (no meu caso, main.scss), e salve todas essas alterações no arquivo CSS real.
Essa é uma parte interessante: não é você quem cria o CSS e sim o sass, que lê tudo o que você escreveu no arquivo “.scss” e “exporta” para o arquivo CSS de nome que você escolher, em tempo real.
O modo mais fácil para fazer isso, é abrindo o prompt de comando do seu computador, navegar até a pasta do seu projeto e digitar:
sass --watch arquivo_sass.scss:arquivo_css.css
Perceba que “arquivo_sass.scss” é o caminho do arquivo que você está salvando seu CSS com sass (scss), e “arquivo_css.css” é o caminho do arquivo CSS que o sass irá gerar. Este último não precisa existir, já que o sass vai criá-lo automaticamente.
No meu caso, o código ficou assim:
d: cd "caminhocss" sass --watch sass/main.scss:style.css
E apareceu uma mensagem assim:
>>> Sass is watching for changes. Press Ctrl-C to stop.
Ou seja, o sass está assistindo alterações no arquivo “main.scss” e irá salvar tudo no arquivo “style.css“, dentro da pasta “css“.
Você pode cancelar isso pressionando CTRL + C do seu teclado.
Variáveis em sass
Uma das partes interessantes dos poderes que sass traz para o CSS, é a possibilidade de se trabalhar com variáveis para “salvar” qualquer valor que você quiser.
Se utilizadas corretamente, elas vão ajudar (e muito) para que você pare com a repetição de coisas, por exemplo: cores de fundo e texto, margens iguais para vários elementos, e assim por diante.
Uma variável em sass tem o seguinte formato:
$variavel-qualquer: "Um valor qualquer";
Normalmente, substituímos o valor da propriedade CSS que queremos. Por exemplo:
$fundo-padrao: #FFFFFF;
body{
background: $fundo-padrao;
}No seu arquivo CSS, o output seria o mesmo que:
body{
background: #FFFFFF;
}Como você pode perceber no trecho acima, sass é a mesma coisa que CSS, porém, com alguns super poderes que vão facilitar a sua vida no dia a dia.
Imagine um projeto gigante, onde vários elementos têm a mesma cor de fundo. Neste caso, ao invés de alterar cada linha do seu CSS que contém aquela determinada cor, altere apenas o valor da variável $fundo-padrao, e o sass irá substituir tudo em todas as linhas que tiverem essa variável.
Você pode criar quantas variáveis quiser para qualquer tipo de valor. Veja outro exemplo:
$fundo-padrao: #ff0000;
$margem-padrao: 1.3em;
$padding-padrao: 20px;
body{
background: $fundo-padrao;
}
p{
margin: 0 0 $margem-padrao 0;
}
.box{
padding: $padding-padrao;
}Isso resultaria em:
body {
background: red;
}
p {
margin: 0 0 1.3em 0;
}
.box {
padding: 20px;
}
Com isso você já deve imaginar o poder das variáveis para um projeto maior.
Regras aninhadas em sass
O sass permite que você utilize regras aninhadas para facilitar o gerenciamento.
Normalmente, você faria o seguinte para trabalhar com regras aninhadas em CSS convencional:
.menu ul{
width:100%;
}
.menu ul li{
float:left;
}
.menu ul li a{
display:block;
padding:10px;
}Com isso você já saberia que estou selecionando a ul que está dentro do .menu, o li que está dentro dessa ul, e o a que está dentro desse li.
Em sass você pode fazer o mesmo da seguinte maneira:
.menu {
ul {
width:100%;
li {
float:left;
a {
display:block;
padding:10px;
}
}
}
}E teria o mesmo resultado.
Perceba que você não precisa escrever novamente elemento pai, já que está aninhando as informações antes de fechar as chaves do mesmo.
Isso vai lhe ajudar a criar projetos complexos com maior organização e semântica.
Uma dica: uma das primeiras coisas que as pessoas se apaixonam no sass é a possibilidade de criar funções aninhadas, porém, você deve analisar cuidadosamente seu código para que não fique preso ao seu HTML. Algumas vezes, pode ser mais interessante escrever as regras separadamente, sem aninhar; outras vezes, no entanto, seu código pode demandar que você aninhe algumas regras para funcionar corretamente. Isso vai depender do seu projeto.
Referenciando elementos com &
Você também pode aninhar seletores de pseudo-classe (entre outros) utilizando o &, veja:
a{
display:block;
padding:10px;
&:hover{
background:red;
}
&:active{
background:blue;
}
}
Perceba que os elementos &:hover e &:active dentro das chaves do elemento pai a, irão gerar o seguinte CSS:
a {
display: block;
padding: 10px;
}
a:hover {
background: red;
}
a:active {
background: blue;
}O & também faz outro papel interessante.
Perceba abaixo:
.classe{
font-size: 18px;
&-interna{
font-size:20px;
}
}O &-interna acima, significa o mesmo que .classe-interna. Ou seja, o trecho anterior gera o seguinte CSS:
.classe {
font-size: 18px;
}
.classe-interna {
font-size: 20px;
}Place holder: %
Você também pode utilizar o seletor % para “segurar” várias propriedades que podem ser utilizadas posteriormente com uma diretiva do sass, chamada de @extend.
Essa diretiva estende as propriedades de um elemento para outro, veja:
%qualquer-coisa{
font-size: 18px;
}
body{
@extend %qualquer-coisa;
}
.classe{
@extend %qualquer-coisa;
}Com isso, o sass entende que você quer estender as propriedades de %qualquer-coisa para body e .classe, o que irá gerar o seguinte CSS:
body, .classe {
font-size: 18px;
}
Matemática no seu CSS com sass
O sass traz outros super poderes para o CSS do seu projeto, tais como: somar, subtrair, multiplicar e dividir qualquer valor numérico (e até outras propriedades, como cores e mais).
Os operadores são os mesmo de outras linguagens de programação (e da matemática, é claro): +, -, *, / e %.
Veja um exemplo muito básico:
body{
font-size: 1pt + 18px;
}Retornaria o seguinte:
body {
font-size: 14.5pt;
}
Aqui um exemplo da própria documentação do sass:
p {
font: 10px/8px; // Texto puro, não divide
$width: 1000px;
width: $width/2; // Usa uma variável, divide
width: round(1.5)/2; // Usa uma função, divide
height: (500px/2); // Usa parênteses, divide
margin-left: 5px + 8px/2px; // Usa o sinal de +, divide
}Como você pode perceber, é possível fazer vários cálculos de várias maneiras diferentes, até com cores:
p {
color: #010203 + #040506;
}Que seria o mesmo que: 01 + 04 = 05, 02 + 05 = 07, e 03 + 06 = 09.
A saída neste caso é:
p {
color: #050709;
}Interpolação de valores dinâmicos com strings
Normalmente, criamos variáveis para alterar o valor de uma propriedade CSS (sass no caso), porém, elas podem ser utilizadas para qualquer coisa, até para selecionar um elemento qualquer. Por exemplo:
$elemento: ".corpo";
#{$elemento} {
background:red;
}Irá gerar o seguinte CSS:
.corpo {
background: red;
}
Para capturar o valor de uma variável em um local diferente do valor de uma propriedade CSS, basta utilizar #{$variavel}.
Outro exemplo:
$valor: "sass";
body:before{
content: "Estou aprendendo #{$valor}";
}Gera o seguinte CSS:
body:before {
content: "Estou aprendendo sass";
}
@import
Sim! Você pode importar vários arquivos para seu arquivo sass se quiser manter a organização. A parte interessante aqui é que você não vai gerar novas requisições HTTP, pois, o sass irá compilar tudo em um único arquivo.
Um exemplo disso, é o clássico reset de CSS.
Suponhamos que você tenha um arquivo reset.scss com os seguintes dados:
*{
margin: 0;
padding: 0;
border: 0;
}No seu arquivo main.scss, você apenas importaria tudo que está no arquivo reset.scss.
@import "reset.scss";
A saída do seu arquivo CSS seria a junção de tudo o que está em ambos os arquivos scss.
Nesse caso:
* {
margin: 0;
padding: 0;
border: 0;
}
Estruturas @if, @else e @else if condicionais em sass
Você pode verificar várias coisas utilizando as estruturas condicionais em sass: @if, @else, e @else if (se / se não / se não, mas se…).
Suponhamos que eu queira saber se um texto é muito escuro para um fundo preto e modificar esse texto para branco (ou vice-versa):
$cor-fundo: #fff;
body{
background: $cor-fundo;
@if lightness($cor-fundo) < 50 {
color: #ffffff;
} @else {
color: #000000;
}
}Na parte:
@if lightness($cor-fundo) < 50 {
color: #ffffff;
} @else {
color: #000000;
}Estou verificando se a cor de fundo que vou utilizar como propriedade tem menos de 50 de luminosidade; se tiver, ela é muito escura para um texto escuro, portanto, o texto será configurado como branco (#ffffff); caso contrário (ela tiver mais que 50 de luminosidade), a cor do texto será escura (#000000), pois o fundo é claro.
A saída do CSS será o seguinte:
body {
background: white;
color: #000000;
}
Ou seja, fundo claro, texto escuro. Seria o contrário se o fundo fosse escuro.
Um exemplo da documentação do sass:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}Terá a saída igual a:
p {
color: green;
}Laços @for, @each e @while em sass
Por mais incrível que isso possa parecer, você pode utilizar laços @for, @each e @while em sass, do mesmo jeito que você faz em Javascript, ou PHP.
A sintaxe é um pouco diferente, mas o resultado é o mesmo:
@for
Para criar um laço for, utilize a palavra @for, a variável que irá contar ($i), o valor inicial (from 1) até o valor final (through 10). Os resultados vêm entre chaves { e }.
@for $i from 1 through 10 {
.elemento-#{$i} {
width: 10px * $i;
}
}Isso geraria o seguinte:
.elemento-1 {
width: 10px;
}
.elemento-2 {
width: 20px;
}
.elemento-3 {
width: 30px;
}
.elemento-4 {
width: 40px;
}
.elemento-5 {
width: 50px;
}
.elemento-6 {
width: 60px;
}
.elemento-7 {
width: 70px;
}
.elemento-8 {
width: 80px;
}
.elemento-9 {
width: 90px;
}
.elemento-10 {
width: 100px;
}
Perceba que, com poucas linhas de código em sass, eu posso escrever milhares de coisas em CSS sem muito esforço.
@each
Você também pode utilizar uma lista de elementos separados por vírgula, e tratar esses valores com @each.
O laço @each vai fazer uma interação a cada elemento da lista.
Veja um exemplo:
@each $elemento in 'gol', 'fiat', 'uno' {
.#{$elemento}{
background: url('images/icon-#{$elemento}.jpg');
}
}Acima eu falo que a cada (@each) elemento ($elemento) em (in) 'gol', 'fiat', este elemento terá uma imagem de fundo correspondente. e 'uno'
Isso irá gerar o seguinte:
.gol {
background: url("images/icon-gol.jpg");
}
.fiat {
background: url("images/icon-fiat.jpg");
}
.uno {
background: url("images/icon-uno.jpg");
}
Com o trecho anterior em mente, você pode até fazer alguns joguinhos de programação, veja:
$lista: 'gol', 'fiat', 'uno', 'punto', 's10', 'ferrari';
$width: 1;
@each $elemento in $lista {
$width: $width * 2;
.item-#{$elemento}:before{
background: url('images/icon-#{$elemento}.jpg');
margin-right:5px;
width: $width + px;
}
}Isso irá gerar o seguinte CSS:
.item-gol:before {
background: url("images/icon-gol.jpg");
margin-right: 5px;
width: 2px;
}
.item-fiat:before {
background: url("images/icon-fiat.jpg");
margin-right: 5px;
width: 4px;
}
.item-uno:before {
background: url("images/icon-uno.jpg");
margin-right: 5px;
width: 8px;
}
.item-punto:before {
background: url("images/icon-punto.jpg");
margin-right: 5px;
width: 16px;
}
.item-s10:before {
background: url("images/icon-s10.jpg");
margin-right: 5px;
width: 32px;
}
.item-ferrari:before {
background: url("images/icon-ferrari.jpg");
margin-right: 5px;
width: 64px;
}
A cada interação do laço, a variável de largura é aumentada.
Muito lindo, tudo isso!
@while
Também a mesma coisa dos outros laços, só muda um pouco o contexto. O laço while significa “enquanto isso for verdadeiro, faça isso“.
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}No trecho acima, o valor inicial de $i é 6; a cada volta do laço @while, verificamos se $i é maior que zero; se for, subtraímos 2 de $i, e checamos novamente se $i continua sendo maior que zero… Continuamos fazendo isso até que $i seja menor que zero, o que irá retornar um valor falso para que o laço termine.
O resultado disso é:
.item-6 {
width: 12em;
}
.item-4 {
width: 8em;
}
.item-2 {
width: 4em;
}@mixin em sass
Um @mixin é o mesmo que juntar algumas propriedades e valores, que podem ser incluídos em vários elementos quando necessário.
Você cria um @mixin da seguinte maneira:
@mixin fonte-grande(){
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
}Para incluir seu @mixin em qualquer elemento, você deve utilizar a palavra @include e o nome do @mixin, exemplo:
.header-text{
width: 500px;
height:500px;
background:red;
@include fonte-grande();
}
.sidebar h3, .footer h3{
@include fonte-grande();
}Isso irá gerar o seguinte CSS:
.header-text {
width: 500px;
height: 500px;
background: red;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
}
.sidebar h3, .footer h3 {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
}
Perceba que tudo o que está no @mixin, também está onde você utilizou a palavra @include.
Além disso, você também pode utilizar argumentos em um @mixin, exemplo:
@mixin fonte-nova( $cor, $estilo ){
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: $cor;
font-style: $estilo;
}
.header-text{
@include fonte-nova(red, italic);
}
.sidebar h2{
@include fonte-nova(black, normal);
}
.footer h2{
@include fonte-nova(#ffffff, italic);
}A saída do trecho acima em CSS será o seguinte:
.header-text {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: red;
font-style: italic;
}
.sidebar h2 {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: black;
font-style: normal;
}
.footer h2 {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: white;
font-style: italic;
}
Funções em sass
Além das funções que já existem no sass (vamos falar disso mais adiante), você também pode criar suas próprias funções com funcionalidades adicionais. Veja um exemplo:
@function dobra-valor( $valor ) {
$valor: $valor * 2;
@return $valor;
}
.pesquisa {
width: dobra-valor( 300px );
}Nesse caso, criei uma função que dobra e retorna qualquer valor enviado. A saída no trecho acima será conforme o esperado:
.pesquisa {
width: 600px;
}
Apesar de ser um exemplo pequeno, imagine o que você pode fazer com as funções se tiver um tempo para pensar no que precisa?
Dentro delas você pode utilizar tudo o que o sass lhe oferece, e retornar o valor que for necessário para seu código. É muito legal!
Funções nativas do sass
Antes de criar suas próprias funções, vale a pena conferir se ela já existe nativamente no sass.
Existem milhares de funções para tudo o que você possa imaginar, e o melhor da história é que elas já vêm embutidas no sass, você só tem que usá-las.
Veja exemplos interessantes de funções nativas:
rgb, lighten e darken
div{
$cor: rgb(10,20,51);
background: $cor;
color: lighten($cor, 50%);
border: 10px solid darken($cor, 20%);
}O trecho acima utiliza três funções nativas do sass: rgb(vermelho, verde, azul), lighten($cor, porcentagem), darken($cor, porcentagem).
- rgb – converte uma cor rgb para html;
- lighten – clareia uma cor qualquer;
- darken – escurece uma cor qualquer;
Estes foram apenas exemplos simples, você pode encontrar mais detalhes no link abaixo:
São muitas funções para serem descritas em um único artigo.
Vídeo tutorial: aprenda sass
Se quiser, você também pode assistir a um vídeo tutorial de mais de uma hora que detalha as principais funções do sass.
Se tiver alguma dúvida, basta comentar.
