css - sass - 分组选择器

Question

我有这个 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 重复父项的情况下在父项和子项中使用相同的属性？

Answer 1

试试这个:

$white: #fff;

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