A possibilidade de armazenar valores em variáveis foi um dos pontos principais pontos dentre outros, na minha opinião, para o crescimento da adoção dos pré processadores. E se pudéssemos armazenar seletores? Sim, vou chorar. ʘ‿ʘ
É possível fazermos algo assim:
| @custom-selector :--button button, .btn, input[type="submit"]; | |
| :--button { | |
| /* css magic */ | |
| } |
O que fizemos acima foi armazenar todos os elementos button e input[type="submit"] e também com a classe btn em :--button. Feito isso, declaramos as regras de estilo direto em :--button.
Com base nisso, podemos brincar um pouco mais e fazermos algo do tipo:
| @custom-selector :--enter :hover, :focus, .is-hover; | |
| @custom-selector :--active :active, .is-active; | |
| :--button:--enter { | |
| /* :hover, :focus and .is-hover styles */ | |
| } | |
| :--button:--active { | |
| /* :active and .is-active styles */ | |
| } |
O que fizemos na brincadeira acima foi:
- Armazenar os estados
:hover,:focuse os elementos com classeis-hoverem:--enter. - Armazenar o estados
:activee os elementos com a classe.is-activeem:--active. - Juntamos tudão: tudo que haviámos armazenado em
:--buttoncom:--entere:--active.
Podíamos também chegar no mesmo resultado usando o nosso amigo matches:
| :--button:matches(:hover, :focus, .is-hover) { | |
| /* :hover, :focus and .is-hover styles */ | |
| } | |
| :--button:matches(:active, .is-active) { | |
| /* :active and .is-active styles */ | |
| } |
A diferença, apontada pelo meu amigo Rafael Rinaldi é que o grande custom selectors é uma opção de preset se comparado com o matches, o que o deixa mais fácil de reutilizar.
Aqui é possível ver um exemplo com os códigos acima.