Closed RussellBishop closed 6 years ago
It can be done with:
@mixin createPlaceholder($placeholder) {
%#{$placeholder} {
@content;
}
}
@mixin usePlaceholder($placeholder) {
@extend %#{$placeholder};
}
$placeholderName: 'u-color-grey';
@include createPlaceholder($placeholderName) {
color: grey;
}
td {
@include usePlaceholder($placeholderName);
}
Test
Even better...
@mixin Placeholder($placeholder) {
%#{$placeholder} {
@content;
}
}
$placeholderName: 'u-color-grey';
$placeholderProperty: 'color';
$placeholderValue: 'grey';
@include Placeholder($placeholderName) {
#{$placeholderProperty}: #{$placeholderValue};
}
td {
@extend %#{$placeholderName};
}
For example, generate:
.u-color-orange, .u-color-brand { color: #foorang; }