# O básico de Sass para se virar nas webs

> Domine o básico de Sass para se virar nas webs. Aprenda variáveis, nesting, mixins e organização para escrever CSS profissional. Comece agora!

URL: https://dpw.dev/css/o-basico-de-sass/  
Publicado em: 2020-02-17  
Categoria: css  
Tags: sass  
Autor: Tárcio Zemel

[Vídeo no YouTube](https://www.youtube.com/watch?v=kA-PXyfjL84)

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

![Sass logo](/images/blog/o-basico-de-sass/sass-logo.webp)

Não mostraremos como instalar e rodar o Sass ([veja no site oficial](https://sass-lang.com/install)), 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](/css/variaveis-css-guia-pratico/) 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:

```scss
$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:

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

Inclusive, usando [operadores de Sass](https://sass-lang.com/documentation/operators), o que traz possibilidades interessantíssimas para o ambiente de desenvolvimento.

```scss
.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:

```typescript
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:

```scss
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:

```scss
@import "typography";  
@import "color";  
@import "layout";
```

Como exemplo prático, [veja o arquivo de estilos principal do BFB](https://github.com/desenvolvweb/basic-front-boilerplate/blob/master/sass/style.scss), 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](https://github.com/desenvolvweb/basic-front-boilerplate/tree/master/sass) 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:

```scss
@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](https://sass-lang.com/documentation/at-rules/control), é possível produzir mixin poderosíssimos. [Veja alguns exemplos](https://medium.com/@justinbrazeau/10-useful-sass-mixins-for-automation-833cdee9d69b).

Para mais possibilidades, [confira a documentação de `@mixin`](https://sass-lang.com/documentation/at-rules/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:

```scss
@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`](https://sass-lang.com/documentation/at-rules/function).

## Conclusão

Esta foi a explicação das **principais features de Sass** que usamos no [BFB](https://github.com/desenvolvweb/basic-front-boilerplate) para [nossos tutoriais no YouTube](http://youtube.com.br/c/dpwoficial).

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](https://sass-lang.com/documentation) 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?

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml