#5 - Conhecendo o pré-processador SASS | Placeholder
Publicado há 4 anos por Fernando Moreira.Tempo de leitura: 2 minutos - 348 palavras.Nos artigos anteriores eu falei sobre Funções e sobre Mixins do SASS, mas sem sombra de dúvidas, uma das funcionalidades mais legais do SASS (na minha opinião) é você poder criar [placeholders](http://sass-lang.com/documentation/file.SASSREFERENCE.html#placeholderselectors)_ para agrupamento de códigos repetidos.
O que é um Placeholder
Um placeholder selector (transuzindo para o português: seletor de espaço reservado) se assemelha com os sectores de ID's (#) e de classes (.), ou seja você cria o seu bloco de CSS normal mas ao invés de usar .
ou #
você usa %
para suas declarações.
%background-white {
background-color: #fff;
}
%heading-big {
font-size: 52px;
padding: 30px 15px;
@extend %background-white;
}
body {
@extend %background-white;
}
.post-heading {
@extend %heading-big;
border-bottom: 1px solid #eee;
margin-bottom: 60px;
}
.post-page {
@extend %heading-big;
color: #333;
}
Outra diferença de ID's e Classes é que os placeholders não ficam visíveis quando meu CSS for processado, ele só aparece se for invocado com @extend
por alguma classe ou ID.
No código acima os placeholders %background-white
e %heading-big
não aparecerão no meu CSS processado enquanto não forem chamados, mesmo invocando o %background-white
dentro de %heading-big
eles ainda continuarão invisíveis.
E qual a vantagem?
A grande vantagem de se usar placeholders é o agrupamento de propriedades CSS iguais, isso deixa o seu CSS final muito mais limpo e consequentemente menor, veja o resultado final:
body,
.post-heading,
.post-page {
background-color: #fff;
}
.post-heading,
.post-page {
font-size: 52px;
padding: 30px 15px;
}
.post-heading {
border-bottom: 1px solid #eee;
margin-bottom: 60px;
}
.post-page {
color: #333;
}
Note que o agrupamento dos selectores body
, .post-heading
e .post-page
com a propriedade background-color
e .post-heading
e .post-page
com as propriedades font-size
e padding
. Isso é incrível não?
Bom, por hoje é só..
Leia os outros artigos dessa série:
- Conhecendo o pré-processador SASS - Instalação
- Conhecendo o pré-processador SASS - Variáveis
- Conhecendo o pré processador SASS - Mixins
- Conhecendo o pré processador SASS - Funções
- Conhecendo o pré-processador SASS - Placeholder
Gostou do artigo, compartilhe para que outros possam ler também e comenta ai?
/end