以下是一个简单的例子:
.button {
background-color: blue;
&:hover {
background-color: darkblue;
}
&.active {
background-color: red;
}
}
在这个例子中,& 符号用于引用父选择器 .button。当 Sass 编译成 CSS 时,& 会被替换为其父选择器,产生如下的 CSS:
.button {
background-color: blue;
}
.button:hover {
background-color: darkblue;
}
.button.active {
background-color: red;
}
这使得你能够以更简洁的方式表示样式,同时确保生成的 CSS 具有合适的层次结构。
& 还可以用于处理复杂的选择器:
.container {
.item {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
在这个例子中,& 用于引用 .container .item 的父选择器,分别生成 .container .item:first-child 和 .container .item:last-child 两个选择器。
转载请注明出处:http://www.zyzy.cn/article/detail/6168/SASS