| 32 | Using Placeholders with @extend |
In the previous task, you learned about @extend. It was used to extend a .button class. Those styles were applied to two new classes, which could then be used in some markup. But you don’t really need the .button selector as it’s too generic. It’s only being used to extend its style rules onto other selectors.
This is where placeholders come in. You can define a placeholder by using the % sign. Then, you declare your styles as usual, and you can extend the styles to other classes as seen in the example.
On compilation, though, placeholders are omitted from the final output. In the example, this means that the %button placeholder selector is not present in the output. This keeps your final CSS cleaner.
At ...
Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
