有没有办法在 sass 中实现它？

Question

我在 sass 中找不到实现我需要的方法，您可以帮助我了解这一点。

假设这是代码。

p, span {
    font-size: 12px;
    // other styles

    &:hover {
        color: blue;
    }
}

我在这里需要的是为这两个选择器中的每一个添加不同的悬停颜色的方法，假设 p 元素为蓝色，跨度为红色，目前我正在这样做：

p, span {
    font-size: 12px;
    // other styles
}

p:hover {
    color: blue;
}

span:hover {
    color: red;
}

这里的问题是选择器的重复，这似乎不是一个好的做法，我正在考虑这样的事情或任何类似的方式：

p, span {
    font-size: 12px;
    // other styles

    &:first-selector:hover {
        color: blue;
    }
    &:second-selector:hover {
        color: red;
    }
}

提前致谢。

Answer 1

你的想法的问题是，在 &:nth-selector:... 中，你要么重复选择器（导致你目前的做法没有任何改进），要么引入一些幻数，在我看来会大大降低可读性。

你可以做的是扩展一个基本的 p、跨度、样式：

%p_span_placeholder_selector {
    font-size: 12 px;
    // other styles
}

p {
    @extends %p_span_placeholder_selector;
    &:hover {
        color: blue;
    }
}

span {
    @extends %p_span_placeholder_selector;
    &:hover {
        color: red;
    }
}

您可以阅读有关 @extend in the docs 的更多信息。使用 mixin 可以实现类似的结果：

@mixin p_span_mixin {
    font-size: 12 px;
    // other styles
}

p {
    @include p_span_mixin;
    &:hover {
        color: blue;
    }
}

span {
    @include p_span_mixin;
    &:hover {
        color: red;
    }
}

推荐在此处详细了解这两种方法的（缺点）优势和适用性：https://webinista.com/updates/dont-use-extend-sass/

有没有办法在 sass 中实现它？

Is there a way for implementing this in sass?

dry

sass

css-selectors