避免双重书写风格

Question

我想知道如果对于一个元素和它可能的伪类是相同的，我可以避免两次写某些样式：

.element {
  color: #a0c225;
  &:hover {
    color: #a0c225;
  }
  &:focus {
    color: #a0c225;
  }
}

并且我不想在SASS中重复颜色#a0c225？

Answer 1

我会用这样的东西：

$col-example: #a0c225;

%class-example {
  color: $col-example
}

.element {
  @extend %class-example;
  /* more properties */
  &:hover {
    @extend %class-example;
    /* more properties */
  }
  &:focus {
    @extend %class-example;
    /* more properties */
  }
}

将编译为：

.element, .element:hover, .element:focus {
    color: #a0c225;
}

.element {
  /* more properties */
  &:hover {
    /* more properties */
  }
  &:focus {
    /* more properties */
  }
}