O básico de Sass para se virar nas webs

Confira as principais features de Sass para acompanhar nossos tutoriais de desenvolvimento web.

Sass é um dos principais pré-processadores CSS disponíveis atualmente. Em nossa humilde opinião, também é o melhor. Há anos usamos Sass e pretendemos continuar usando.

Caso você ainda não tenha tanta familiaridade com o pré processador e/ou queira saber um pouco mais a respeito, veja neste artigo as principais features que Sass oferece.

Não mostraremos como instalar e rodar o Sass (veja no site oficial), mas só com esse básico, você será capaz de atestar que, realmente, trata-se de um pré-processador de primeira linha, que pode fazer maravilhas no dia a dia do desenvolvimento front end.

Variáveis

Até pouco tempo atrás, quando variáveis CSS ainda eram um sonho distante, essa feature de Sass sozinha ajudava a explodir mentes pelo mundo de webdev a fora.

Hoje, o que realmente surpreende a garotada é descobrir que variáveis CSS e variáveis de Sass são coisas completamente diferentes. Mas isso é assunto para outro artigo.

De qualquer maneira, poder usar variáveis Sass continua sendo uma das principais funcionalidades do pré-processador — ainda mais quando usadas conjuntamente com suas outras funcionalidades.

É bastante simples usar variáveis em Sass, veja este exemplo:

$color-var: #157bad;
$STRINGVAR: 'Texto';
$numberVar: 30;
$aNoThErVaR: 150px;

$color-var: #157bad;

$STRINGVAR: 'Texto';

$numberVar: 30;

$aNoThErVaR: 150px;

Como visto, é mais ou menos como declarar variáveis em qualquer linguagem de programação. Você só tem que usar o famoso caractere dinheirinho (raramente chamado dollar sign) e não querer fazer alguma loucura, como colocar um caractere especial no nome.

Uma vez declarada, uma variáveis pode ser usada à vontade:

body {
  background-color: $color-var;
}

body {

background-color: $color-var;

}

Inclusive, usando operadores de Sass, o que traz possibilidades interessantíssimas para o ambiente de desenvolvimento.

.c-component {
  $randomValue: 50;
  margin-left: 150px - $randomValue;
}

.c-component {

$randomValue: 50;

margin-left: 150px - $randomValue;

}

Viu que a variável foi declarada dentro da regra? Com isso, seu escopo foi limitado; ela só estará disponível dentro deste bloco, diferente do exemplo anterior de body, que usou uma declaração de variável feita fora de qualquer bloco e, por isso, disponível “globalmente”.

Aninhamento

Provavelmente a feature de aninhamento é responsável por angariar os corações de 57,45% dos devs que usam Sass.

Com ela, é possível escrever menos código, que fica mais inteligível/legível e, consequentemente, mais facilmente manutenível.

Um código corriqueiro de CSS do tipo:

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

nav ul {

list-style: none;

margin: 0;

padding: 0;

}

nav li {

display: inline-block;

}

nav a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

Em Sass, pode ser escrito:

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav {

ul {

list-style: none;

margin: 0;

padding: 0;

}

li {

display: inline-block;

}

a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

Viu como ul, li e a estão aninhados na regra de nav? Isso faz com que o entendimento da hierarquia do código seja melhor, trazendo muita facilidade de leitura — ainda mais se considerarmos que todo bom editor/IDE pode recolher e expandir regiões de código.

Importação (`@import`)

Agora a coisa começa a ficar séria. O fato de, com Sass, ser possível dividir os arquivos do projeto para uma melhor organização e arquitetura CSS realmente permite dar um passo além da qualidade do código.

CSS também possui uma diretiva @import nativa, mas são coisas completamente diferentes.

O @import nativo de CSS importa regras de outras folhas de estilo, fazendo uma nova requisição HTTP; o @import de Sass funciona como em linguagens de programação: depois da compilação, é como se o que foi importado fizesse parte do arquivo.

Usar o recurso de importação do Sass é tão fácil quanto, em um arquivo .scss qualquer:

@import "typography";  
@import "color";  
@import "layout";

@import "typography";

@import "color";

@import "layout";

Como exemplo prático, veja o arquivo de estilos principal do BFB, em que importamos todos os demais para, no final, a compilação gerar somente 1 arquivo .css.

Partials

Quando vai nomear seus arquivos sass, se você iniciar com um _ (underline), isso significa que aquele arquivo é um partial.

Na compilação de Sass, partials não produzem um arquivo CSS. Consulte novamente a parte de estilos do BFB e verá que todos os arquivos são partials, com exceção do arquivo principal style.scss (que importa os demais).

Estrategicamente, isso faz com que, na compilação final, o resultado seja somente 1 arquivo, o style.css.

Mixins (`@mixin`)

Em Sass, mixins (diretiva @mixin)permitem escrever grupos de declarações CSS que podem ser reusadas à vontade no código.

Se você lembrar da época de pouco suporte dos navegadores a novas features de CSS (olha que nem faz tanto tempo), era comum escontrar mixins de Sass para economizar na escrita:

@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box {
  @include transform(rotate(30deg));
}

@mixin transform($property) {

-webkit-transform: $property;

-ms-transform: $property;

transform: $property;

}

.box {

@include transform(rotate(30deg));

}

Quer dizer, na declaração do mixin, é possível passar 1 ou mais parâmetros (ou nenhum). Quando se vai usá-lo (através da diretiva @include), informa-se seu nome e o valor para o param.

Perceba que isso enseja à escrita de bem menos código. Mas não somente isso. Usando outros recursos de Sass, como fluxos de controle, é possível produzir mixin poderosíssimos. Veja alguns exemplos.

Para mais possibilidades, confira a documentação de @mixin.

Funções (`@function`)

Tal como em linguagem de programação, funções de Sass (diretiva @function) permite fazer operações complexas e retornar valores.

A diferença para mixins é que a função retorna somente um valor, tendo, inclusive, uma diretiva especial para informar isso, a @return.

Para ficar mais claro, veja este exemplo:

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

@function pow($base, $exponent) {

$result: 1;

@for $_ from 1 through $exponent {

$result: $result * $base;

}

@return $result;

}

.sidebar {

float: left;

margin-left: pow(4, 3) * 1px;

}

Viu que interessante? Mas as funções de Sass são ainda mais poderosas, permitindo que se faça peripécias mil para ajudar na codificação front end. Dê uma olhada na documentação de @function.

Conclusão

Esta foi a explicação das principais features de Sass que usamos no BFB para nossos tutoriais no YouTube.

Claro que Sass é uma linguagem rica, “CSS com superpoderes”, que tem e oferece muito mais. Portanto, não deixe de dar uma lida em sua documentação oficial para, pelo menos, ficar ciente das possibilidades.

De qualquer maneira, só com esse básico, a partir de agora você já está apto a acompanhar nossos tutoriais usando BFB, não sendo Sass mais algum impeditivo de compreensão.

Mas diz aí: você usa Sass no desenvolvimento front end? Qual é sua feature favorita?