SCSS (Sassy CSS)
SCSS e a sintaxe mais popular do pre-processador Sass, adicionando variaveis, aninhamento, mixins e funcoes ao CSS. Compila para CSS padrao e utiliza a extensao .scss com sintaxe totalmente compativel com CSS.
Tipo MIME
text/x-scss
Tipo
Texto
Compressão
Sem perdas
Vantagens
- + CSS-compatible syntax — any CSS is valid SCSS
- + Powerful module system (@use, @forward) for large projects
- + Rich built-in functions for colors, math, and lists
- + Industry standard in enterprise design systems
Desvantagens
- − Requires a compilation step (Dart Sass or build tool)
- − Native CSS custom properties and nesting reduce the need for SCSS
- − Large projects can have complex dependency graphs
Quando usar .SCSS
Use SCSS para projetos CSS de media a grande escala que beneficiam de variaveis, reutilizacao e organizacao. Para projetos mais pequenos, o CSS puro pode ser suficiente.
Detalhes técnicos
O SCSS e um superconjunto do CSS que compila para CSS padrao. Adiciona variaveis ($color: #333), aninhamento, @mixin/@include, @extend, funcoes, operadores e importacoes parciais. A implementacao Dart Sass e a atual predefinida.
Histórico
O Sass foi criado por Hampton Catlin em 2006 com uma sintaxe baseada em indentacao. A sintaxe SCSS (Sassy CSS) foi introduzida no Sass 3.0 (2010) para ser totalmente compativel com CSS, tornando-se rapidamente o estilo preferido.