1

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;
}
sawa
  • 165,429
  • 45
  • 277
  • 381

1 Answers1

2

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);
}
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • The `$` in `@include color($background: green, $font: red);` does not look nice. Is it possible to pass something like a hash or keyword arguments? – sawa Feb 14 '14 at 13:34
  • OK, I realized that SASS keyword arguments need `$`. Thanks for the help. – sawa Feb 14 '14 at 13:46