Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Extend vs Inline in SASS each
// Standard each
$controllers: 'find' 'compare' 'predict' 'intelligence'
@each $ctrl in $controllers
.controller-#{$ctrl} > [class^="#{ctrl}"]
border: 1px solid #f00
// Standard each output
/*
.controller-find > [class^="ctrl"] {
border: 1px solid red;
}
.controller-compare > [class^="ctrl"] {
border: 1px solid red;
}
.controller-predict > [class^="ctrl"] {
border: 1px solid red;
}
.controller-intelligence > [class^="ctrl"] {
border: 1px solid red;
}
*/
// Extend
$controllers: 'find' 'compare' 'predict' 'intelligence'
.border
border: 1px solid #f00
@each $ctrl in $controllers
.controller-#{$ctrl} > [class^="#{ctrl}"]
@extend .border
// Extend output
/*
.border, .controller-find > [class^="ctrl"], .controller-compare > [class^="ctrl"], .controller-predict > [class^="ctrl"], .controller-intelligence > [class^="ctrl"] {
border: 1px solid red;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.