Question

我有以下类似的选择器，我试图在Sass中重构它们。什么是最有效的方法？

.test table td em.green,
.test table td em.red,
.test table td strong.green,
.test table td strong.red,
.report table td em.green,
.report table td em.red,
.report table td strong.green,
.report table td strong.red {}

Answer 1

这应该这样做：

.test, .report {
    td {
        em, strong {
            &.red, &.green {
                color: red;
            }
        }
    }
}

请注意，您只需要table或td，而不是两者（因为td必须是表的后代，并且表中的内容必须在td，th或caption标记内）。< / p>

Answer 2

查看@extend或使用@mixin：

例如使用@extend，您可以扩展其他类的属性，并仅覆盖您需要的内容。像这样：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

使用@mixin可以创建蓝图，轻松创建另一个类实例。例如：

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }

简化Sass中的相似选择器

2 个答案: