Overriding properties in the “child class” works due to the style cascade in the browser: styling for the same selector that comes later in the file always wins over the styling that came before it.
Perhaps a bit unintuitively, this actually works out fine even if the combined selectors have differing specificity (think .
class extending an #id).
Extending selectors may often be preferable to using mixins to achieve the same effect:/* style.
scss */@mixin animal { background: gray; border: 1px solid red; font-weight: bold; font-size: 50px; color: red; padding: 20px;}.
cat { @include animal; color: white;}.
dog { @include animal; color: black;}/* compiled CSS */.
cat { background: gray; border: 1px solid red; font-weight: bold; font-size: 50px; color: red; padding: 20px; color: white;}.
dog { background: gray; border: 1px solid red; font-weight: bold; font-size: 50px; color: red; padding: 20px; color: black;}Notice how only the last property (color) is different, the rest is the same.
As we define more types of animals, the amount of repeated style properties in the CSS output keeps growing.
This is in contrast to how selector extension would solve the same problem:/* style.
scss */.
animal { background: gray; border: 1px solid red; font-weight: bold; font-size: 50px; color: red; padding: 20px;}.
cat { @extend .
animal; color: white;}.
dog { @extend .
animal; color: black;}/* compiled CSS */.
animal, .
cat, .
dog { background: gray; border: 1px solid red; font-weight: bold; font-size: 50px; color: red; padding: 20px;}.
cat { color: white;}.
dog { color: black;}Finally, selector extension allows for integrations into 3rd party CSS libraries, that need not be specifically designed for extension, or even be written in SCSS.
Twitter Bootstrap, for example, includes nice styling for buttons with .
btn doesn't apply it to <button> elements by default.
In our quest to reduce unnecessary CSS classes, we can fix this simply with:/* style.
scss */@import "bootstrap.
scss";button { @extend .
btn;}This will add the button selector into the Bootstrap source wherever .
btnis defined.
The extension mechanism is surprisingly clever even with more complex selectors and allows chaining extends (think .
catextends .
feline extends .
animal), butWith great power comes great responsibility.
overly neat tricks with @extend may be hard to reason about when debugging styles.
Use responsibly.
Prefixing parent selector referencesThis is the familiar way you’re probably using &:/* style.
scss */a { &:hover { color: red; }}/* compiled CSS */a:hover { color: red;}But & can be used with a prefix just as well:/* style.
scss */p { body.
no-touch & { display: none; // hide the message if not on a touch device }}/* compiled CSS */body.
no-touch p { display: none;}This can be very useful when you have a deep nesting of rules, and you want to effect a change to the styling of an element based on a selector match much closer to the DOM root.
Client capability flags such as the Modernizrno-touch class are often applied this way to the <body> element.
This way you don't have to back out of your nesting just to be able to change your <p> styling based on a class on the <body>.
And that’s it for now…Hope you got something useful…Happy Designing…Feedbacks are always welcome… Do like and comment below….