# Syntactically Awesome Style Sheet (SASS)
> [!NOTE] Syntactically Awesome Style Sheet (SASS)
> SASS (Syntactically Awesome Style Sheet) é um Pré-processador CSS que estende a funcionalidade do [[Cascading Style Sheets]] (CSS), permitindo escrever estilos de forma mais eficiente, organizada e reutilizável. Ele introduz recursos como Variáveis, Aninhamento de Seletores, Mixins, Herança (CSS) e Funções CSS, que simplificam o desenvolvimento de folhas de estilo complexas.
**Por que usar SASS?**
* **Reutilização de Código:** Através de Variáveis e Mixins, evitamos repetição de código.
* **Organização:** Aninhamento de Seletores e Partials (SASS) (arquivos importados) ajudam a estruturar o código de forma lógica.
* **Manutenção:** Alterações em Variáveis ou Mixins se refletem em todo o projeto, facilitando a manutenção.
**Funcionalidades Principais:**
1. **Variáveis:** Permitem armazenar valores (como cores, fontes, tamanhos) para serem reutilizados.
```scss
// Exemplo de Variáveis em SASS
$cor-primaria: #3498db;
$tamanho-fonte-base: 16px;
body {
font-size: $tamanho-fonte-base;
color: $cor-primaria;
}
h1 {
color: darken($cor-primaria, 10%); // Exemplo de função SASS
}
```
1. **Aninhamento de Seletores:** Permite aninhar seletores CSS dentro de outros, espelhando a estrutura HTML e tornando o código mais legível.
```scss
// Exemplo de Aninhamento
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
&:hover { // Pseudo-classe aninhada
color: red;
}
}
}
}
}
```
1. **Herança (`@extend`):** Permite que um seletor herde os estilos de outro seletor.
```scss
// Exemplo de Herança
%mensagem-base { // Placeholder selector
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
border: 1px solid black;
padding: 20px;
margin: 20px;
}
.sucesso {
@extend %mensagem-base;
background-color: green;
}
.aviso {
@extend %mensagem-base;
background-color: orange;
}
.erro {
@extend %mensagem-base;
background-color: red;
}
```
1. **Mixins:** Permitem definir grupos de declarações CSS que podem ser reutilizados em vários seletores, aceitando argumentos.
```scss
// Exemplo de Mixin
@mixin borda-arredondada($raio: 5px) {
-webkit-border-radius: $raio;
-moz-border-radius: $raio;
border-radius: $raio;
}
.caixa {
@include borda-arredondada(10px);
}
```
**Compilação SASS para CSS**
Os navegadores não entendem diretamente arquivos `.scss`. Portanto, o código SASS precisa ser compilado para [[Cascading Style Sheets]] (CSS) antes de ser utilizado em uma página web.
* **Ferramentas:** A implementação mais comum e recomendada é o [[Dart Sass]]. Outras ferramentas como [[Node-Sass]] (agora depreciado) e [[Ruby Sass]] (também depreciado) existiam.
* **Comando Básico (Dart Sass):**
```bash
sass input.scss output.css
```
Este comando compila um único arquivo SASS para um arquivo CSS.
* **Compilação Automática (Watch Mode):** Para monitorar alterações e compilar automaticamente:
```bash
sass --watch input.scss:output.css
```
Ou para compilar múltiplos arquivos:
```bash
sass --watch src/:dist/
```
Onde `src/` contém os arquivos `.scss` e `dist/` é o diretório de saída para os arquivos `.css`.
**:: Referência ::** [[Cascading Style Sheets]]
# Notas