Search code examples
csscolorssassnested-properties

Nested properties with common affix

In SCSS, properties with common prefix can be described as nested properties. Thus, as in the example,

.funky{
  font: 2px/3px{
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

is compiled to:

.funky{
  font: 2px/3px;
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

How do I do a similar thing with properties with common affix? How can I write a nested property that would be compiled to this:

.funky{
  color: red;
  background-color: green;
  border-color: blue;
}
Solution

  • Sass has no construct for such a concept. You'll have to patch it or write a verbose mixin to do it.

    @mixin color($background: null, $border: null, $font: null) {
    background-color: $background;
    border-color: $border;
    color: $font;
}

.foo {
    @include color($background: green, $font: red);
}