Issue
I'm trying to get several CSS declarations with the same value to be declared on a single declaration. I've come across this problem a few times, one example here, but this time is a more simple example.
Desired output:
.flex-col-1 div.pagebuilder-column-group,
.flex-col-2 div.pagebuilder-column-group,
.flex-col-3 div.pagebuilder-column-group,
.flex-col-4 div.pagebuilder-column-group,
.flex-col-5 div.pagebuilder-column-group,
.flex-col-6 div.pagebuilder-column-group,
.flex-col-7 div.pagebuilder-column-group,
.flex-col-8 div.pagebuilder-column-group {
gap: 1rem;
}
Current SCSS:
@mixin initial-gap() {
@each $rows in $row-amounts {
.flex-col-#{$rows} {
& div.pagebuilder-column-group {
gap: 1rem;
}
}
}
}
Current output:
.flex-col-1 div.pagebuilder-column-group {
gap: 1rem;
}
.flex-col-2 div.pagebuilder-column-group {
gap: 1rem;
}
.flex-col-3 div.pagebuilder-column-group {
gap: 1rem;
}
.flex-col-4 div.pagebuilder-column-group {
gap: 1rem;
}
.flex-col-5 div.pagebuilder-column-group {
gap: 1rem;
}
.flex-col-6 div.pagebuilder-column-group {
gap: 1rem;
}
.flex-col-7 div.pagebuilder-column-group {
gap: 1rem;
}
.flex-col-8 div.pagebuilder-column-group {
gap: 1rem;
}
The only way I've found, thus far, is to implicitly declare them in the mixin. Any other ways of achieving the desired CSS??
eg.
@mixin initial-gap() {
.flex-col-1,
.flex-col-2,
.flex-col-3,
.flex-col-4,
.flex-col-5,
.flex-col-6,
.flex-col-7,
.flex-col-8 {
& div.pagebuilder-column-group {
gap: 1rem;
}
}
}
Solution
This should work. I referred to this post.
%foo {
gap: 1rem; }
@for $i from 1 through 8 {
.flex-col-#{$i} div.pagebuilder-column-group {
@extend %foo;
}
}
Answered By - Lisa
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.