较少的嵌套属性

Question

出于好奇：
是否可以使用嵌套属性？由于SASS支持此功能（Nested Properties）

div {
  background: {
    size: cover;
    color: green;
  }
}

要

div {
  background-size: cover;
  background-color: green;
}

Answer 1

查看文档，似乎不可能。 但您可以轻松创建mixin that works similar。

.setBackground( @color: green; @image: ''; @repeat: no-repeat; @position: center; @size: '' ) {
  background: @color @repeat @position;

  & when not ( @image = '' ) {
    background-image: @image;
  }

  & when not ( @size = '' ) {
    background-size: @size;
  }
}

div {
  .setBackground(
    @color: yellow;
    @image: url( some-image.png );
    @repeat: repeat;
    @size: cover;
  );
}