Sass - 插值语法 / &

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44198965/article/details/101162228

插值语法

你可以通过 #{ } 插值语法在选择器和属性名中使用 Sass 的变量：

/* $变量 */
$name:button;
$new-border:border-radius;*斜体样式*

/* 插值表达式 */
div > #{ $name } {
    #{ $new-border }:10px;
}

编译为CSS：

div > button {
  border-radius: 10px; 
}

同样，使用 #{ } 插值语句也可以把 Sass 变量插入到属性值中。但大多数情况下这种做可能还不如使用直接变量来的方便，但使用 #{ } 意味着，靠近它的运算符都将被视为纯 CSS，这可以避免各种运算。

&

它就像在选择器中使用一样，Sass 中的 & 指向当前父选择器，下面是一个逗号分隔的 列表(list) 中包含一个空格的分隔列表(list)：

.foo.bar .baz.bang, .bip.qux {
    $selector: & !global;
  }

div{
    width:$selector;
}

编译为CSS：

div {
  width: .foo.bar .baz.bang, .bip.qux; 
}

$selector 的值现在是 ((".foo.bar" “.baz.bang”), “.bip.qux”)，这个混合选择器在这里加了引号，以表明他们是字符串，但在现实中，他们将不带引号的。即使选择器不包含逗号或空格，&总会有两个嵌套层次，因此它可以保证访问一致性。

---

如果没有父选择器，&的值将是空(null)，这意味着你可以在一个 @mixin 中使用它来检测父选择是否存在：

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}