Sass mixin with nested ampersand prefix - css

Question

What's the best way to accomplish the ability to use class prefixes using a mixin with placeholder selectors.
To elaborate, say I have a box class that has 3 sizes but I would like to have the option of having it a different color.
My base classes would be:
.box
.box-md
.box-sm
If I wanted any of the base class boxes to be green, I would like to be able to specify as such:
.box-green
.box-md-green
.box-sm-green
How would I be able to do so in as DRY a method as possible?
Similar to this answer but using mixins AND placeholder extends: SCSS, how to #extend Nested ampersand "prefix"?
Here's what I put together so far (which doesn't work)
HTML:
<div class="box"></div>
<div class="box-green"></div>
<div class="box-sm"></div>
<div class="box-sm-green"></div>
CSS (SCSS):
// Main style placholder as mixin
#mixin box {
height: 300px;
width: 300px;
margin: 20px;
display: inline-block;
background-color: blue;
&-green {
background-color: green;
}
}
// Placeholders
%box {
#include box;
}
%small-box {
#include box;
width: 100px;
height: 100px;
}
// Class Definition
.box { #extend %box; }
.box-sm { #extend %small-box; }
Pen: https://codepen.io/Aricha_MW/pen/xxKZWbV

Answer 1

This isn't a complete answer but does pose as a solution to the problem:
Our champions are the #at-root directive and interpolation here. The solution requires both the use of mixins and placeholder selectors and is a little messy.
If we set up our placeholder selector styles:
%box {
height: 300px;
width: 300px;
margin: 20px;
display: inline-block;
background-color: blue;
}
%small-box {
#extend %box;
width: 100px;
height: 100px;
}
Then we can let mixins do the rest of the work for us.
First we define our mixin for the variation we want:
#mixin green-bg($selector, $root) {
// Takes element out of any nesting
// Then we interpolate our argument variables
#at-root{
#{$root}-green {
// We can't set a placeholder as an argument so we'll just borrow the string and append the placeholder definer '%'
#extend %#{$selector};
background-color: green;
}
}
}
Then we define our mixins that will help us define our classes
#mixin box($parent) {
#extend %box;
#include green-bg(box, #{$parent});
}
#mixin small-box($parent) {
#extend %small-box;
#include green-bg(small-box, #{$parent});
}
When we define our classes they'll look clean like so:
.box { #include box(&); }
.box-sm { #include small-box(&); }
Here's what the final product looks like in action: https://codepen.io/Aricha_MW/pen/oNvxjEw
Edit: 08/15/2019 - Much cleaner version here:
https://codepen.io/Aricha_MW/pen/mdbPVXY