Css 分组选择器

我有这个sass代码：

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand {
    &:hover {
    color: #fff;
    }
}

此输出：

.navbar-default .navbar-nav > li > a:hover:hover,
.navbar-default .navbar-brand:hover {
  color: #fff;
}

但我想：

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover {
    color: #fff;
}

如何在父级和子级中使用相同的属性而不使用sass重复父级？

尝试以下方法：

$white:#fff；
.navbar默认值{
.navbar品牌{
颜色：$白色；
&：悬停{
颜色：$白色；
}
}
.navbar导航>li>a:悬停{
颜色：$白色；
}
}

试试这个：

$white:#fff；
.navbar默认值{
.navbar品牌{
颜色：$白色；
&：悬停{
颜色：$白色；
}
}
.navbar导航>li>a:悬停{
颜色：$白色；
}
}

不幸的是，仅仅用符号和并不能准确地完成您的要求。符号（&）总是被父选择器替换。在您的情况下，选择父选择器。但是您可以做的是从第一个选择器中删除

：悬停
，然后抛出一个
@extend
。我创建了一个名为“.primary color”的新选择器，它将保存颜色

.primary-color {
  color: white;
}
.navbar-default .navbar-brand {
    @extend .primary-color;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-brand {
    &:hover {
        @extend .primary-color;
    }
}

这将编译为以下CSS：

.primary-color, .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:hover {
  color: white;
}

@extend在编译CSS的方式上与mixin略有不同。我不喜欢它给你我创建的额外的“.primary color”类，但除此之外，你可以得到你想要的

可能设置比需要的要复杂一些。我只想添加您在问题中提到的额外父选择器，以获得您想要的结果

这是我在sass-ampersand上写的一篇文章，可能会有所帮助
 不幸的是，仅仅用符号是不可能做到你所要求的。符号（&）总是被父选择器替换。在您的情况下，选择父选择器。但是您可以做的是从第一个选择器中删除
：悬停
，然后抛出一个
@extend
。我创建了一个名为“.primary color”的新选择器，它将保存颜色

.primary-color {
  color: white;
}
.navbar-default .navbar-brand {
    @extend .primary-color;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-brand {
    &:hover {
        @extend .primary-color;
    }
}

这将编译为以下CSS：

.primary-color, .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:hover {
  color: white;
}

@extend在编译CSS的方式上与mixin略有不同。我不喜欢它给你我创建的额外的“.primary color”类，但除此之外，你可以得到你想要的

可能设置比需要的要复杂一些。我只想添加您在问题中提到的额外父选择器，以获得您想要的结果

这是我在sass-ampersand上写的一篇文章，可能会有所帮助
 这是一个优雅而清晰的解决方案，没有太复杂（像我的一样）。两个答案都很好（@richfinelli&@karldawson），非常感谢！但我真的不认为这种情况有什么好处，所以我会用标准CSS保留它，只使用变量中的颜色。这是一个优雅而清晰的解决方案，不像我的解决方案那样过于复杂。两个答案都很好（@richfinelli&@Karl Dawson），非常感谢！但是真诚地说，我看不出在这种情况下有什么好处，所以我将使用标准CSS保留它，只使用变量中的颜色。如果您将
.primary color
更改为
%primary color
（Sass占位符），然后将其用作
@extend:%primary color
，则可以保存正在输出的未使用的类：）@Karl Dawsom-这样更好。我还以为会有这样的事呢！不用担心，谢谢你的安瓿和文章-我在本周早些时候读过这篇文章，以防我忘记了使用它们的一两个技巧。如果你将
.primary color
更改为
%primary color
（Sass占位符），然后将其用作
@extend:%primary color
，您将未使用的类保存为输出：）@Karl Dawsom-这更好。我还以为会有这样的事呢！不用担心，谢谢你的安培士和文章-我在本周早些时候读过，以防我忘记了一两个使用它们的技巧。