wearelighthouse / stemCSS

Build the stem - don't repeat yourself, don't unset yourself.
MIT License
20 stars 1 forks source link

Create placeholder, or @extend existing utility. #1

Closed RussellBishop closed 6 years ago

RussellBishop commented 6 years ago

For example, generate:

.u-color-orange, .u-color-brand { color: #foorang; }

RussellBishop commented 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

RussellBishop commented 6 years ago

Even better...

@mixin Placeholder($placeholder) {
  %#{$placeholder} {
    @content;
  }
}

$placeholderName: 'u-color-grey';
$placeholderProperty: 'color';
$placeholderValue: 'grey';

@include Placeholder($placeholderName) {
  #{$placeholderProperty}: #{$placeholderValue};
}

td {
  @extend %#{$placeholderName};
}