SCSS是从CSS覆盖的最佳方式

Question

您能否帮我改进SCSS的以下内容：

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
    color: $mainhover-color;
}

Answer 1

你的问题没有多大意义。

无论如何 - 它已经是有效的SCSS - 但无效的CSS因为它需要编译。

SCSS转换器有很多在线CSS。但除非您将$mainhover-color更改为其编译值，否则它们都不会起作用。

这就是后重构：

.navbar-default {
    .navbar-brand {
        &:hover,
        &:focus,
        &:active,
        &.active {
            color: $mainhover-color;
        }
    }
}

这对SO来说不是一个非常有用的问题。您应该阅读SCSS基础知识。

Answer 2

您无需将其更改为SCSS，因为CSS在SASS / SCSS中有效且您要添加的所有内容都是嵌套，但如果您仍想这样做，您可以这样做：

.navbar-default {
    .navbar-brand {
        &:hover,
        &:active,
        &:focus,
        &.active {
            color: $mainhover-color;
        }
    }
}

请记住，这不会让它变得更好，它只是另一种语法。我建议你阅读更多有关SCSS基础知识的内容。