Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics Improve Your Workflow with Sass Extend Placeholder Selectors

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

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.