SCSS 中的这是什么样式代码：#{&}
What is this in SCSS it was in the style code: #{&}
@if $media == mobile {
@media only screen and (max-width: 479px) { @content; }
@at-root {
.l-grid.mobile #{&} { @content; }
}
}
这是什么意思？ #{&}
& 输出父选择器。
正常情况是使用
附加伪类，如: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
@if $media == mobile {
@media only screen and (max-width: 479px) { @content; }
@at-root {
.l-grid.mobile #{&} { @content; }
}
}
这是什么意思？ #{&}
& 输出父选择器。
正常情况是使用
附加伪类，如: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