萨斯 - 分组选择

我有这样的青菜代码：萨斯 - 分组选择

.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; 
}

我如何使用相同的属性在父母和孩子没有重复与萨克斯父母？

来源

2016-01-15 ThemesCreator

试试这个：

$white: #fff; 
 

 
.navbar-default { 
 
\t .navbar-brand { 
 
\t \t color: $white; 
 
\t \t &:hover { 
 
\t \t \t color: $white; 
 
\t \t } 
 
\t } 
 
\t .navbar-nav > li > a:hover { 
 
\t \t color: $white; 
 
\t } 
 
}

来源

2016-01-15 13:53:11

这是一个优雅和清晰的解决方案，不是过于复杂（像我的）。 – richfinelli

这两个答案都很好（@richfinelli和@Karl Dawson），非常感谢！但是，真诚的我在这种情况下没有看到任何优势，所以我会用标准的CSS来保存它，只是将颜色放在一个变量中。 – ThemesCreator

不幸的是，它不是真的有可能正是你在问什么只与符号。＆符号（&）总是被父代选择符替换。在你的情况下，父母选择器。但你可以做的是从第一个选择器中删除:hover，并在@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＆符写的文章，可能会有所帮助。 https://css-tricks.com/the-sass-ampersand/

来源

2016-01-15 14:02:06 richfinelli

如果您将'.primary-color'更改为'％primary-color'（一个Sass占位符），然后将其用作'@extend：％primary-color'，则保存输出的未使用类:) –

@Karl Dawsom - 那好多了。我以为有这样的事情！ – richfinelli

不用担心，并感谢您的＆符文 - 我会在本周早些时候阅读，以防万一我忘记了一两个使用它们的技巧。 –

萨斯 - 分组选择

回答

相关问题