Copy Directive: @copy
The Copy directive (@copy) is powerful in that it allows authors to give a group one or more properties a name -- a name that can be used to add properties to other objects. So as variables can be used to name and share values, using @copy allows authors to name and share properties.
Unlike inheritance in which the selectors of previous rules are modified, @copy directly duplicates the properties from one or more rules to another. Authors identify which properties should be duplicated by providing one or more selectors. @copy will duplicate the properties of all previous rules that exactly match the given selectors. Only properties will be duplicated, nested rules and directives will not be duplicated.
.box { width: 100px; }
.box_2 { border: 1px solid #f00; }
.box { line-height: 1.5em; }
.box_props { @copy .box, .box_2; }
.box { width: 100px; }
.box_2 { border: 1px solid #f00; }
.box_props { width: 100px; line-height: 1.5em; border: 1px solid #f00; }
There is no guarantee which order properties will be applied. In the example above, line-height was added before .box_2 properties even though it came earlier in the stylesheet.