PlaceHolder não funciona? | Sass e Compass: Descomplicando o CSS

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

por Victor Hugo dos Santos Revoredo

| 84.6k xp | 5 posts

Eu sei que o curso já faz muito tempo, por isso a pergunta, pois estou tentando usar o placeholder e nada acontece, ele se comporta como se fosse um mixin normal

1 resposta

solução!

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

08/09/2020

Fala ai Victor, tudo bem? O funcionamento basicamente é o mesmo, a diferença está em dois pontos:

O placeholders não podem receber argumentos ou serem chamados como função.

O CSS final será diferente, o mixin vai separar os seletores, enquanto o placeholder vai juntá-los em apenas um seletor, exemplo:

@mixin title() {
    font-size: 10px;
}

%title {
    font-size: 10px;
}

.m1 {
    @include title;
}

.m2 {
    @include title;
}

.m3 {
    @include title;
}

.p1 {
    @extend %title;
}

.p2 {
    @extend %title;
}

.p3 {
    @extend %title;
}

O CSS final seria:

.p3, .p2, .p1 {
  font-size: 10px;
}

.m1 {
  font-size: 10px;
}

.m2 {
  font-size: 10px;
}

.m3 {
  font-size: 10px;
}

Espero ter ajudado.