4

Estou fazendo alterações em uma página que foi feita utilizando Sass, e ainda sou bem iniciante com o framework, e me deparei com o seguinte código:

%cf {
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

Eu entendo que esse código foi feito para que pudesse utilizar mais pra frente em outros lugares, para que não tivesse a necessidade de ficar repetindo o código, mas minha dúvida é: como eu invoco esse %cf para aproveitá-lo em outras partes do meu projeto?

1 Resposta 1

5

% é feito para criar um "placeholder" de CSS, e para utiliza-lo vc precisa fazer um @extend. Veja a documentação oficial do placeholder https://sass-lang.com/documentation/style-rules/placeholder-selectors

Aqui tem um exemplo de como o seu código ficaria

%cf {
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

.box {
    @extend %cf;
    width:100px;
    background: red;
    etc...
}

O %cf vai criar um pseudo elemento de CSS no elemento com classe .box e fazer um clearfix

Output do código

.box:after {
    content: '';
    display: block;
    clear: both;
}
2
  • Ótima explicação Hugo, entendi perfeitamente. Obrigado! Commented 2/03/2020 às 14:07
  • 1
    @MateusD. fico feliz em ter ajudado, que bom que ficou claro o funcionamento :), ele é muito útil para tratar o :hover tb, não deixe de ver a documentação
    – hugocsl
    Commented 2/03/2020 às 14:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .