The possibility to stock some values in variables was one of the main features among others, in my opinion, to the growth of the adoption of the pre-processor. What if we could store selectors? Yes, I will cry. ΚβΏΚ
It is possible to do something like that:
| @custom-selector :--button button, .btn, input[type="submit"]; | |
| :--button { | |
| /* css magic */ | |
| } |
What we did was store all the elements button and input[type="submit"] and also every element with btn class in :--button. Then, we declare the style rules in :--button.
Based on this, we can play a bit more and do something like:
| @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 */ | |
| } |
What we did above was:
- Store the states
:hover,:focusand all the elements with the classis-hoverin:--enter. - Store the states
:activeand all the elements with the class.is-activein:--active. - We put everything together: everything in
:--buttonwith:--enterand:--active.
We could also get the same result using our friend matches:
| :--button:matches(:hover, :focus, .is-hover) { | |
| /* :hover, :focus and .is-hover styles */ | |
| } | |
| :--button:matches(:active, .is-active) { | |
| /* :active and .is-active styles */ | |
| } |
The difference, remembered by my friend Rafael Rinaldi is that our great custom selectors is a choice of preset compared with matches, which makes more easy to reuse.
Here the link with the example above.