css - 具有公共词缀的嵌套属性

Question

在 SCSS 中，具有公共前缀的属性可以描述为嵌套属性。因此，如在示例中，

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

编译为：

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

我如何对具有共同词缀的属性做类似的事情？如何编写将编译为此的嵌套属性：

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

Answer 1

Sass 没有这样的概念。你必须修补它或编写一个详细的 mixin 来完成它。

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

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