Recentemente, tive uma conversa no Twitter que me lembrou que o que é aparente para alguns velhos chapéus pode ser obscuro para aqueles que estão apenas mergulhando em Sass. Aqui estão minhas regras básicas sobre quando usar mixins, extensões e variáveis.
Variáveis
Use uma variável quando você tiver um único valor que deseja armazenar. Por exemplo:
$color: #444;
$width: 4em;
.module {
color: $color;
}
Compila para:
.module {
color: #444;
}
Estende
Use @extend
quando quiser armazenar várias propriedades estáticas e passá-las aos seletores:
.module {
background: #fff;
color: #444;
}
.main_module {
@extend .module;
min-height: 3em;
}
.sidebar_module {
@extend .module;
min-height: 2em;
}
Compila para:
.module, .main_module, .sidebar_module {
background: #fff;
color: #444;
}
.main_module {
min-height: 3em;
}
.sidebar_module {
min-height: 2em;
}
Mixins
Mixins sempre compilam as regras CSS onde aparecem no código. Onde um @extend
gera mais seletores, @mixin
sempre gera mais regras. Observe o acima como uma combinação:
módulo @mixin {
background: #fff;
cor: # 444;
}
.main_module {
@include module;
min-height: 3em;
}
.sidebar_module {
@include module;
min-height: 2em;
}
Compila para:
.main_module {
background: #fff;
color: #444;
min-height: 3em;
}
.sidebar_module {
background: #fff;
color: #444;
min-height: 2em;
}
É por isso que para regras estáticas é frequentemente (nem sempre) menos incômodo de usar @extend
.
Como regra geral, eu só uso mixins para fazer coisas “matemáticas”. “Se não precisa passar variável, não precisa ser um mixin” é o meu lema:
@mixin module($parent-color) {
color: darken($parent-color, 50%);
}
.main_module {
@include module(#ccc);
min-height: 3em;
}
.sidebar_module {
@include module(#444);
min-height: 2em;
}
Compila para algo como:
.main_module {
color: #999;
min-height: 3em;
}
.sidebar_module {
color: #000;
min-height: 2em;
}