嵌套背景属性

Question

我想嵌套“背景”属性。我可以在SCSS中这样做吗？

    background:{
     #efefef;
     linear-gradient(top, $backcolor 0%, #bbbbbb 100%);
     -moz-linear-gradient(top, $backcolor 0%, #bbbbbb 100%);
     -webkit-linear-gradient(top, $backcolor 0%,#bbbbbb 100%);
    }

Answer 1

我不太清楚你对“巢”的意思，但我会假设这意味着添加background: linear-gradient的前缀版本。您可以使用简单的mixin或使用Compass：

来实现这一目标

<强> MIXIN

@mixin gradient ($solid, $start, $stop) {
     background: $solid; 
     background: -moz-linear-gradient(top, $start 0%, $stop 100%);
     background: -webkit-linear-gradient(top, $backcolor 0%, $stop 100%);
     background: linear-gradient(top, $start 0%, $stop 100%); 
}

body {
  @include gradient(#efefef, $backcolor, #bbbbbb);
}

<强>罗盘

body {
  @include background(linear-gradient(top, $backcolor 0%, #bbbbbb 100%),  #efefef);
}

如果你要在SASS做很多工作，我强烈推荐指南针。