Honcharov Anton Honcharov Anton - 2 months ago 15
Sass (Sass) Question

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; }

what does it means? #{&}


& outputs the parent selector.

Normal cases are for appending pseudo-classes like :hover using

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

Which outputs:

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

When using @at-root this allows you to keep the parent selector while moving the element out of the parent.

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

In this case #{&} is the equivalent to .class:after.

The above will output to:

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

See this article for more information: http://sassbreak.com/getting-back-to-our-roots/#modify-an-elements-use-of-a-class