html - 避免双重写作风格

Question

我想知道如果某个元素的某些样式相同并且可能是伪类，我如何避免将某些样式写两次:

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

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

Answer 1

你可以使用 & 来做这样的事情:

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

编译为:

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