#mixin select a specific placeholder by using argument - css

Question

I'm trying to use a mixin with an argument and inside a placeholder.
The idea is to use one line of code to select a specific placeholder in a class.
Actually, I don't know if there is another better way to do that, maybe with a function or other.
I'm learning Sass, so I'm trying to experiment.
HTML
<div class='wrap'>
<div class='box'></div>
<div class='box'></div>
</div>
SCSS
// VAR
$size-xs: 30px;
$size-s: 50px;
$size-m: 70px;
$color-1: orange;
$color-2: rgb(34,139,86);
#mixin box($val) {
%box-one {
width: $size-s;
height: $size-s;
background: $color-1;
margin: auto;
border-radius: 6px;
}
%box-two {
width: $size-s;
height: $size-s;
background: $color-2;
margin: auto;
border-radius: 6px;
}
.box {
#extend #{$val} !optional;
}
}
.wrap {
width: 100%;
height: 100px;
background: #f5f5f5;
display: flex;
justify-content: space-between;
#include box(box-one);
}
thank you!

Answer 1

Currently, your code is not working because your forgot to put a % before #{$val}:
.box {
#extend %#{$val} !optional;
}
Anyhow, it's not a good idea to put placeholder selectors inside a mixin because every time the mixin is called, you are creating new selectors. It means that for example if you add:
.randomSelector {
#include box(box-one);
}
You will get:
.wrap .box { ... }
.randomSelector .box { ... }
Instead of:
.randomSelector .box, .wrap .box { ... }
So I would recommend you to externalize %box-one and %box-two.
One last thing, if the only difference between these two classes is the background property, maybe using a single class regrouping the commons properties would be a better optimization:
.box {
width: $size-s;
height: $size-s;
margin: auto;
border-radius: 6px;
}
%box-one {
background: $color-1;
}
%box-two {
background: $color-2;
}
#mixin box($val) {
.box {
#extend %box-#{$val} !optional;
}
}
.wrap {
width: 100%;
height: 100px;
background: #f5f5f5;
display: flex;
justify-content: space-between;
#include box(one);
}
If you have more box styles you can even dynamically create the placeholders:
$boxStyles: (
one: $color-1,
two: $color-2
);
#each $box, $style in $boxStyles {
%box-#{$box} {
background: $style;
}
}