SCSS中的内容是样式代码：＃{＆amp;}

Question

@if $media == mobile {
    @media only screen and (max-width: 479px) { @content; }
    @at-root {
      .l-grid.mobile #{&} { @content; }
    }
  }

这意味着什么？ ＃{＆安培;}

Answer 1

&输出父选择器。

正常情况是使用

附加:hover之类的伪类

.selector{ color: #000; &:hover{ color: #fff; } }

哪个输出：

.selector{ color: #000; } .selector:hover{ color: #fff; }

使用@at-root时，这允许您在将元素移出父元素时保留父选择器。

.class:after{ content: 'Just any .class element'; @at-root{ div#{&}{ content: 'A .class DIV element'; } } }

在这种情况下，#{&}相当于.class:after。

以上将输出到：

.class:after{ content: 'Just any .class element'; } div.class:after{ content: 'A .class DIV element; }

有关详细信息，请参阅此文章：http://sassbreak.com/getting-back-to-our-roots/#modify-an-elements-use-of-a-class