{"componentChunkName":"component---src-templates-single-template-tsx","path":"/sass-parte-5-placeholder","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"

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.

\n

O que é um Placeholder

\n

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.

\n
%background-white {\n  background-color: #fff;\n}\n\n%heading-big {\n  font-size: 52px;\n  padding: 30px 15px;\n  @extend %background-white;\n}\n\nbody {\n  @extend %background-white;\n}\n\n.post-heading {\n  @extend %heading-big;\n  border-bottom: 1px solid #eee;\n  margin-bottom: 60px;\n}\n\n.post-page {\n  @extend %heading-big;\n  color: #333;\n}
\n

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.

\n

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.

\n

E qual a vantagem?

\n

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:

\n
body,\n.post-heading,\n.post-page {\n  background-color: #fff;\n}\n\n.post-heading,\n.post-page {\n  font-size: 52px;\n  padding: 30px 15px;\n}\n\n.post-heading {\n  border-bottom: 1px solid #eee;\n  margin-bottom: 60px;\n}\n\n.post-page {\n  color: #333;\n}
\n

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?

\n

Bom, por hoje é só..

\n

Leia os outros artigos dessa série:

\n
    \n
  1. Conhecendo o pré-processador SASS - Instalação
    2. \n
  2. Conhecendo o pré-processador SASS - Variáveis
    3. \n
  3. Conhecendo o pré processador SASS - Mixins
    4. \n
  4. Conhecendo o pré processador SASS - Funções
    5. \n
  5. Conhecendo o pré-processador SASS - Placeholder
    6. \n
\n

Gostou do artigo, compartilhe para que outros possam ler também e comenta ai?

\n

/end

","excerpt":"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…","timeToRead":2,"frontmatter":{"category":["sass"],"date":"há 11 anos","datePublished":"2015-09-27T00:00:00.000Z","description":"Uma das funcionalidades mais legais do SASS é você poder criar placeholders para agrupamento de códigos repetidos","path":"/sass-parte-5-placeholder","tags":["sass","css","pre-processador"],"title":"#5 - Conhecendo o pré-processador SASS | Placeholder","image":{"publicURL":"/static/conhecendo-o-pre-processador-sass-b6a1f24254111b01aa97dae9042b5345.jpg","name":"conhecendo-o-pre-processador-sass"}},"fields":{"readingTime":{"words":348}}}},"pageContext":{}}}