Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics Improve Your Workflow with Sass Extend Placeholder Selectors

GoldSpec Digital
GoldSpec Digital
4,185 Points
Posted by GoldSpec Digital
GoldSpec Digital
4,185 Points

Placeholder Selectors

Im a bit confused here,

At 1.56, Guil wishes to nest .btn-info and .btn-callout in one selector. Having previously replaced .btn with %btn (as you can still see in the Sass), he nests the .btn-info and .btn-callout using .btn, not %btn.

Why is this?

Why you both &btn and .btn ?

1 Answer

richporter
richporter
16,727 Points

The way I've always seen it is %btn is a placeholder and not really a selector. It becomes a way to share common styles without representing an element, and only compiles into CSS if it is used.

The .btn is then being used as a prefix to create classes for its children elements, i.e -callout and -info. The & is replaced in the compiled css with the parent name, .btn in this case. This is good for modifier classes.

If in the future you needed to rename the button classes, to .my-own-buttons, then the &-callout and &-info would compile to .my-own-buttons-callout and .my-own-buttons-info, but would still extend and share the common %btn styles.