sass - &的作用

6.8. & in SassScript

就像在选择器中使用时一样,&在SassScript中引用当前父选择器。它是一个逗号分隔的列表和空格分隔的列表。例如:

1 .foo.bar .baz.bang, .bip.qux {
2   $selector: &;
3 }

$selector的值现在是((".foo.bar" ".baz.bang"), ".bip.qux")。这里引用复合选择器来表示它们是字符串,但实际上它们没有被引用。即使父选择器不包含逗号或空格,&也总是有两层嵌套,因此可以一致地访问它。

如果没有父选择器,&的值将为null。这意味着您可以在mixin中使用它来检测父选择器是否存在:

 1 @mixin does-parent-exist {
 2   @if & {
 3     &:hover {
 4       color: red;
 5     }
 6   } @else {
 7     a {
 8       color: red;
 9     }
10   }
11 }

 

 
posted @ 2019-08-06 17:11  front-gl  阅读(1987)  评论(0编辑  收藏  举报