Pragmatic Guide to Sass 3

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 ...