mixins
Permitem que você defina estilos que podem ser reutilizados em toda a folha de estilo. Permite reproduzir regras CSS
completas em um documento Sass
e até mesmo ter argumentos que permite que você produza uma grande variedade de estilos com muito poucos mixins
.
Imagine que você tenha algumas declarações que são repetidas várias vezes em sua folha de estilo e você sabe que a repetição do código é muito ruim e trabalhosa. Para contornar isso escreva mixins
para essas declarações repetidas.
Vamos a um exemplo:
@mixin center() {
display: block;
margin-left: auto;
margin-right: auto;
}
.container {
@include center();
}
.image-cover {
@include center();
}
Dessa forma você não tem que repetir aquelas três linhas cada vez que você precisar aplicar á um elemento, você simplesmente inclui o mixin
.
Um exemplo muito comum em folhas de estilos são a definição do Width e Height
de elementos, esse problema pode ser resolvido com um mixin
, por exemplo.
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
$height
por default têm o mesmo valor que o $width
e sempre que você precisar definir altura e largura, você pode fazer isto:
.icon {
@include size(32px);
}
.cover {
@include size(100%, 10em);
}
Placeholders
São classes que não são geradas quando o SCSS
é compilado.
Exemplo:
%center {
display: block;
margin-left: auto;
margin-right: auto;
}
Parecido com a classe
que usamos em CSS
, exceto pelo prefixo com o %
em vez de um .
. Além disso seguem as mesmas regras de nomenclatura que as classes.
Agora, se você tentar compilar seu Sass/CSS
, você não verá esse exemplo de código no arquivo gerado.
Esse código é inútil até que você use @extend
que visa herdar propriedades de um seletor CSS/SCSS.
Veja como usá-lo:
.container {
@extend %center;
}
Ao fazer isso, o Sass irá obter o conteúdo do %center
e aplicá-lo ao .container
. Você também pode estender os seletores CSS
, assim:
.table-zebra {
@extend .table;
tr:nth-of-type(even) {
background: rgba(0,0,0,.5);
}
}
Este é um caso muito comum para a @extend
. Neste caso, pedimos que a .table-zebra
classe se comporte exatamente como a .table
classe e, em seguida, adicionamos as regras específicas da zebra
. Estender os seletores é muito conveniente quando você desenvolve seu site/sistema em componentes modulares.
Qual deles usar?
Depende do contexto e do que você está tentando fazer.
Resumindo se você precisar de variáveis com um código mais flexível/dinâmico/preciseDeAlteracao, use um mixin
, ao contrário, se precisa de um código agrupado placeholder
.
Há duas razões para isso:
- Você não pode usar variáveis em um placeholder. Até que pode, mas você não pode passar variáveis para seus métodos para que você não pode gerar
CSS
específicas do contexto como você faria com um mixin
.
- Como Sass manipula
mixins
torna muito inconveniente quando
você não usá-los com variáveis. Para colocá-lo
simplesmente: Sass irá duplicar a saída do mixin cada vez que você
usá-lo, resultando não só em CSS duplicado, mas também em uma grande
folha de estilo.
Considerando o primeiro exemplo de código, a saída CSS será:
.container {
display: block;
margin-left: auto;
margin-right: auto;
}
.image-cover {
display: block;
margin-left: auto;
margin-right: auto;
}
Observou o CSS duplicado?
Isso não é ruim, mas se você tiver mixins
em dezenas de linhas SCSS
e sendo usado várias vezes em um projeto, essas três linhas poderiam facilmente se tornar 300.
Agora com placeholder, o CSS
gerado será:
.container, .image-cover {
display: block;
margin-left: auto;
margin-right: auto;
}
Conseguiu perceber que aqui gerou um agrupamento em vez de duplicar o código?
A compilação aproveita agrupamento selector sem quaisquer estilos repetidas. Portanto, sempre que você quiser evitar escrever as mesmas propriedades, sabendo que eles nunca vão mudar use placeholder
. Isso resultará em uma folha de estilos compilada muito mais enxuta(com menos código).
Por outro lado, se você está disposto a escrever as mesmas propriedades em vários lugares, mas com valores diferentes (tamanhos, cores, etc)
um mixin
é o melhor. Se você tiver um grupo de valores fixos e valores de variáveis, você deve tentar uma combinação de ambos.
%center {
margin-left: auto;
margin-right: auto;
display: block;
}
@mixin skin($color, $size) {
@extend %center;
background: $color;
height: $size;
}
a { @include skin(pink, 10em) }
b { @include skin(blue, 90px) }
Neste caso, o mixin está estendendo o espaço reservado para valores fixos em vez de despejá-los diretamente em seu corpo. Isso gera CSS limpo:
a, b {
margin-left: auto;
margin-right: auto;
display: block;
}
a {
background: pink;
height: 10em;
}
b {
background: blue;
height: 90px;
}
Fonte: Sass: Sass Basics