Utilize esta tag quando a pergunta se refere a algum recurso, informação ou problema relacionado exclusivamente ao pré-processador Sass. Sass é um pré-processador de folhas de estilo para auxiliar na produtividade e manutenção do código CSS. É uma extensão do CSS que adiciona recursos como regras aninhadas, variáveis, mixins e extensões de classe. Isso permite aos desenvolvedores escrever CSS estruturados, gerenciáveis e reutilizáveis.
Descrito no site oficial como "css com super poderes", o Sass possui algumas características:
Variáveis
Variáveis são uma maneira de armazenar as informações que você deseja reutilizar em toda a folha de estilo (ou em outras). Você pode armazenar cores, fontes ou qualquer valor de CSS que achar que deseja reutilizar. Sass usa o símbolo $
para transformar algo em variável. Aqui está um exemplo:
Sass
$font-stack: Helvetica, sans-serif;
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Aninhamento
O Sass permitirá aninhar seus seletores de CSS de uma maneira que segue a mesma hierarquia visual do seu HTML. Esteja ciente de que regras excessivamente aninhadas resultarão em CSS super qualificado que pode ser difícil de manter e geralmente é considerado uma má prática.
Sass
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
Mixins
Um mixin permite que você faça grupos de declarações CSS que deseja reutilizar em todo o site. Você pode até passar valores para tornar sua mixagem mais flexível. Um bom uso de um mixin é para vendor prefixes. Aqui está um exemplo para o transform
:
Sass
=transform($property)
-webkit-transform: $property
-ms-transform: $property
transform: $property
.box
+transform(rotate(30deg))
CSS
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
Todas as informações acimas foram obtidas através do site oficial, para mais detalhes, veja o guia Sass Basics.
Links Relacionados:
- Site Oficial(EN)
- GitHub