sass - 嵌套背景属性

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 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 中做很多工作，我强烈推荐指南针。