Função #1: Variáveis
Várias classes de CSS podem conter a mesma regra ou regras em um projeto. Por exemplo, temos 20 caixas em nossa página web com diferentes cores de fundo:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Later, nosso cliente muda de idéia e quer caixas maiores. Então eu preciso aumentar as propriedades de cada classe, uma a uma, para width e height. Isto também pode ser 50 classes. Na programação da vida real, isto pode ser frustrante. Como mencionei acima, este é um exemplo de grande esforço para pequenas mudanças.
Como podemos fazê-lo de forma mais eficiente?
Sass fornece uma solução: variáveis. Como em outras linguagens de programação, nós podemos usar variáveis para armazenar valores e reutilizá-los mais tarde.
Definição de uma variável:
$variable-name: value;
Voltando ao exemplo acima, se definirmos variáveis para width & height :
$box-width: 100px;
$box-height: 100px;
mais tarde quando uma mudança for necessária, só temos que fazer é alterar os seus valores uma vez:
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
CSS em si também suporta variáveis agora, mas não funciona no IE & versões antigas de outros navegadores:
>>
>
>
Função #2: Aninhamento
>
O CSS padrão não suporta aninhamento. Nós não podemos escrever uma classe dentro de outra classe. Como o projeto fica maior, isto traz um problema de legibilidade e a estrutura não parece legal.
Por exemplo, vamos definir um menu de navegação com links clicáveis em HTML abaixo:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
HTML suporta código aninhado. Entretanto sem aninhamento, eles se parecem assim em CSS:
Tivemos que escrever nav para cada tag, mesmo para a pseudo-classe da âncora (hover) porque nav é a tag pai de todas. Sass, porém, suporta aninhamento:
Aqui podemos escrever código melhor estruturado como em HTML. Não precisamos escrever nav classe após classe, o que também evita redundância
Importante: Não é recomendado aninhar classes mais profundas do que 3 níveis.
Função #3: Mixins
Nós aprendemos acima como usar variáveis para regras CSS. Mas e se precisarmos usar um grupo de regras em conjunto? Sass tem uma funcionalidade chamada mixins, deixando-nos fazê-lo.
O que é um Mixin?
Mixins são funções Sass que agrupam declarações CSS. Podemos reutilizá-los posteriormente como variáveis.
Podemos criar um mixin com o comando @ mixin, seguido por um nome:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
ou podemos criar um mixin como função e adicionar parâmetros também:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
Após criar o mixin, podemos usá-lo em qualquer classe com o comando @ include. Assim podemos usar o mixin my-font em vez de 4 linhas de regras de fonte de cada vez. Esta abordagem simplifica o código.
p {
@include my-font;
}
Usar mixins é uma boa maneira de evitar redundância de código.
Fature #4: Importação
Finalmente, podemos cortar nossos enormes arquivos CSS em pedaços menores com o recurso de importação Sass. É muito mais fácil de ler & manter arquivos menores do que um arquivo grande com linhas infinitas.
Atualmente, o CSS agora também tem um recurso de importação. Mas ele funciona de forma diferente. CSS envia um pedido HTTP ao servidor a cada vez que importa um arquivo. Sass faz isso sem uma requisição HTTP, o que é uma abordagem mais rápida.
Tudo que você precisa é, importar seu arquivo Sass com o comando @ import para outro arquivo Sass:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
Não precisamos usar as extensões .scss no caminho do arquivo, Sass irá entendê-lo.