Extends & Placeholders
Extend
Clones the attributes from rules and allows you to add them to another rule.
Examples
@extend .button-core;
Code
.button-core { padding: 10px; }
.button-md { @extend .button-core; }
Notes
These should always be listed first in your CSS declarations.
Resources
Sass File(s) | None |
---|---|
JS File(s) | None Required |
JS Functions | None |
Locale Keys | None |
Accessibility
None at this time.
Placeholder
Instead of repeating styles we can use @extend to extend the placeholder rule.
Examples
%placeholder-styles
{ margin: 0; padding: 0; border: none; }
.item
{ @extend %placeholder-styles; height: 25px; }
Code
%placeholder-styles {
margin: 0;
padding: 0;
border: none;
}
.item{
@extend %placeholder-styles;
}
Notes
None at this time.
Resources
Sass File(s) | None |
---|---|
JS File(s) | None Required |
JS Functions | None |
Locale Keys | None |
Accessibility
None at this time.