Tutorial by Examples

.message color: white .message-important @extend .message background-color: red This will take all of the styles from .message and add them to .message-important. It generates the following CSS: .message, .message-important { color: white; } .message-important { background-...

.message color: white .important background-color: red .message-important @extend .message, .important In the above code @extend is used in one line to add multiple classes' code to .message-important, however, it is possible to use one extend per line like this: .message-importan...

.message color: white background: black .message-important @extend .message font-weight: bold .message-error @extend .message-important font-style: italic This code causes .message-error to extend from .message-important, which means that it will contain code from both .me...

Sometimes, you may want an @extend to be optional, and not require the specified class to exist in your code. .message-important @extend .message !optional background: red This will result in the following CSS: .message-important { background: red; } Disclaimer: This is useful duri...

Sometimes you will create classes that won't be used in their own right, rather only be extended inside other rule sets. This means that the compiled CSS file will be larger than it needs to be. Placeholder selectors solve this problem. Placeholder selectors are similar to class selectors, but th...

Typically trying to extend the parent like so: .parent { style: value; @extend &; } Will result in an error, stating that the parent cannot be extended. This makes sense, but there's a workaround. Simply store the parent selector in a variable. .parent { $parent: &; style...