SCSS / Sass: How do i change a mixin to output specific CSS? - css

Question

I've got a function written in SCSS / Sass which loops every item of a map with the #each function.
$classes-map: ("class-a": "doesntmatter",
"class-b": "doesntmatter",
'class-c': 'doesntmatter');
#mixin function {
#each $class, $property in $classes-map {
%#{$class} {
content: $property;
}
#for $i from 1 to 4 {
&.#{$class}-#{$i} {
#extend %#{$class};
}
}
}
}
On every item of the map is also a #for loop, to make a list of classes with komma's and everytime a different number.
Here's what the output should be:
.class-a-1, .class-a-2, .class-a-3 {
content: "doesntmatter";
}
.class-b-1, .class-b-2, .class-b-3 {
content: "doesntmatter";
}
.class-c-1, .class-c-2, .class-c-3 {
content: "doesntmatter";
}
I'm calling this function by using this piece of code:
.parent {
&.child {
#include function;
}
}
CSS
.parent.child .parent.child.class-a-1, .parent.child .parent.child.class-a-2, .parent.child .parent.child.class-a-3 {
content: "doesntmatter";
}
.parent.child .parent.child.class-b-1, .parent.child .parent.child.class-b-2, .parent.child .parent.child.class-b-3 {
content: "doesntmatter";
}
.parent.child .parent.child.class-c-1, .parent.child .parent.child.class-c-2, .parent.child .parent.child.class-c-3 {
content: "doesntmatter";
}
Desired CSS
.parent.child.class-a-1, .parent.child.class-a-2, .parent.child.class-a-3 {
content: "doesntmatter";
}
.parent.child.class-b-1, .parent.child.class-b-2, .parent.child.class-b-3 {
content: "doesntmatter";
}
.parent.child.class-c-1, .parent.child.class-c-2, .parent.child.class-c-3 {
content: "doesntmatter";
}
How do i change the #mixin function to resolve this problem?

Answer 1

What the &!
Oh so close! As you want to chain / include the parent selector using &, then anything in the mixin should follow suit. The missing piece was the placeholder &%#{$class}.
SCSS:
$classes-map: ("class-a": "doesntmatter",
"class-b": "doesntmatter",
'class-c': 'doesntmatter');
#mixin function {
#each $class, $property in $classes-map {
&%#{$class} {
content: $property;
}
#for $i from 1 to 4 {
&.#{$class}-#{$i} {
#extend %#{$class};
}
}
}
}
.parent {
&.child {
#include function;
}
}
CSS:
.parent.child.class-a-1, .parent.child.class-a-2, .parent.child.class-a-3 {
content: "doesntmatter";
}
.parent.child.class-b-1, .parent.child.class-b-2, .parent.child.class-b-3 {
content: "doesntmatter";
}
.parent.child.class-c-1, .parent.child.class-c-2, .parent.child.class-c-3 {
content: "doesntmatter";
}