[SASS](https://sass-s--s/), **Syntactically Awesome Style Sheet**, é uma linguagem que permite escrever [[Cascading Style Sheets]] de uma forma mais eficiente e prática, usando variáveis e outros elementos para definir os arquivos de Folhas de Estilo em Cascata. Como exemplo, abaixo está uma variável para definir a cor vermelha.
```SCSS
$ Color: Red;
ul {
Font-Size: 14px;
Color: $ color;
}
OL {
Font-Size: 18px;
Color: $ color;
}
```
Resultando em
```css
DIV {
Font-Size: 18px;
p {
Color: Blue;
}
ul {
Color: Green;
}
}
```
É importante destacar que os navegadores não entendem o arquivo `.SCSS` e que, portanto, é necessário converter o código SASS para código [[Cascading Style Sheets]]. É possível fazer essa conversão com o comando `SASS File.SCSS: file.css`. Também é possível converter automaticamente de SASS para [[Cascading Style Sheets]] através do comando Sass `SASS -File.SCSS: File.CSS`.
Também é possível adicionar herança através do SASS, como mostrado abaixo, onde os elementos `succcess`, `Warning` e `error` herdam as características descritas em `%Message`.
```SCSS
%Message {
Font-Family: Sans-Serif;
Font-Size: 18px;
Font-Weight: Bold;
Border: 1px Solid Black;
Padding: 20px;
Margin: 20px;
}
.Success {
@extend %Message;
Background-Color: Green;
}
.Warning {
@extend %Message;
Background-Color: Orange;
}
.error {
@extend %Message;
Background-Color: Red;
}
```
! [[99 - Resources/Images/Example Sass.png]]