Question

我正在使用Sass，目前通过以下方式选择我的div：

[class*='inner-']{
  padding: $pad;
}

但我有这个div的两个变体：-left，-right但是我想知道是否有更好的方法而不是为每一个做单独的样式块，如果我可以合并它变成了一个街区。

我的变体在填充上有轻微的变化。

类似于：

[class*='inner-']{
      padding: $pad;
      -left{
       atttribute
      }
      -right{
      attribute
      }
    }

我可能会过度思考并使其变得毫无意义，但这有助于我学到很多东西，所以如果有人能够了解最好的解决方案，我会很感激。

Answer 1

我不确定我是否理解了你需要什么，但我认为你太复杂了。

简单明了的解决方案：

%inner {
   padding: somepadding;
}

.inner-left {
   @extend %inner;
   some other: attributes for left;
}

.inner-right {
   @extend %inner;
   some other: attributes for right;
}

我们使用占位符（％inner），它就像一个静默类，在被调用之前不会被输出。然后将它扩展到这两个类。漂亮，干净，可维护的解决方案。

Sass用指南针，在连字符之前用x类选择所有div

1 个答案: