使用&符号来引用父级选择器:
.button {
&-primary {
background-color: blue;
color: white;
}
&-secondary {
background-color: gray;
color: black;
}
}
使用@at-root指令来避免嵌套:
.button {
@at-root .btn {
background-color: blue;
color: white;
}
}
使用%占位符来定义可重用的样式:
%button {
background-color: blue;
color: white;
}
.button-primary {
@extend %button;
}
.button-secondary {
@extend %button;
background-color: gray;
}