Question

我有这段代码：

@include component(elementList) {
  tr {
    td {
      width: 50%;
      background: $darkGray;
      padding: 5px;
      text-align: center;
    }
    @include option(heading) {
        padding: 5px;
        background: #eeeeee;
        text-align: center;
        font-family: 'Quicksand', sans-serif;
    }
  }
}

它只是一张桌子。并且每行应该具有深色背景（保存在$darkGray中），除了那些设置了选项--heading的行。那些应该有一个明亮的背景。

但在我的浏览器中，所有行都是深色的。我还在选项中尝试了!important。

有什么想法吗？

谢谢你们

PS：我正在使用CSStyle和SASS。

Answer 1

认为这是一个范围问题。您在表格单元格上使用深色背景，而在行上使用明亮的背景。因此，无论该行具有哪个选项，其包含的单元格都是暗的。

这应该有效（未经测试且从不使用CSStyle）

@include component(elementList) {
  tr {
    td {
      width: 50%;
      background: $darkGray;
      padding: 5px;
      text-align: center;
    }
    @include option(heading) {
      td {
        padding: 5px;
        background: #eeeeee;
        text-align: center;
        font-family: 'Quicksand', sans-serif;
      }
    }
  }
}

CSSTYLE - 选项不会覆盖标准值

1 个答案: