1. 使用 %placeholder：
%placeholder 是一种特殊的选择器，它不会被输出到CSS，但可以用于选择器继承。这允许你创建可重用的样式块，而不会污染生成的CSS。
// 定义一个%placeholder
%base-style {
font-size: 16px;
color: #333;
}
// 使用%placeholder进行继承
.button {
@extend %base-style;
// 按钮独有样式
}
.link {
@extend %base-style;
// 链接独有样式
}
在这个例子中，%base-style 是一个 %placeholder，不会生成独立的CSS类，但可以在 .button 和 .link 中使用 @extend 进行样式继承。
2. 使用 @at-root：
@at-root 允许你在选择器内部跳出当前选择器的嵌套，有助于更灵活地控制生成的CSS结构。
.wrapper {
@at-root {
.button {
// 在.wrapper之外生成.button的样式
color: #fff;
}
}
// .wrapper内部的其他样式
background-color: #333;
}
在这个例子中，@at-root 允许在 .wrapper 选择器内部生成 .button 的样式，而不是在 .wrapper 的内部嵌套生成。这有助于更灵活地控制CSS的生成结构。
使用这些高级特性时要小心，确保你理解其行为，并在需要的情况下使用。过度使用这些功能可能导致代码变得难以理解和维护。选择器继承和高级用法适用于一些特定的场景，但并非适用于所有情况。在实际项目中，根据具体需求来选择是否使用这些功能。
转载请注明出处：http://www.zyzy.cn/article/detail/4342/sass