Welcome to the Treehouse Community
Looking to learn something new?
GoldSpec Digital4,185 Points
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 ?
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.