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，span，style：

%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中实现呢？

1 个答案: