Is it possible to create a nested rule for an individual selector in scss (sass)? In scss, it is possible to write styles for children and names with the parent prefix & , but I need to add an external selector to the attachment. For example, the code:

 .one{ .two, &_1, &_other{ color: red; } }

Compiled into:

 .one .two, .one_1, .one_other{ color: red; }

Is there any possibility to put some external selector inside .one{} so that the result is without a parent? For example, I want to write something like:

 .one{ .two, &_1, &_other, '/какой-то префикс, поднимающий на уровень вверх/'.class{ color: red; } }

And get this code:

 .one .two, .one_1, .one_other, .class{ color: red; }
  • one
    maybe help @ at-root - Grundy
  • @Grundy will help! Just what you need, you can issue an answer. - kizoso

1 answer 1

This became possible with the 3.4 version of Sass .

Use @at-root .

Example №1

Sass:

 .one{ @at-root .two#{&}, &_1, &_other{ color: red; } }

Css:

 .two.one, .one_1, .one_other { color: red; }

Example number 2:

Sass:

 .one{ @at-root #{&}.two, &_1, &_other{ color: red; } }

Css:

 .one.two, .one_1, .one_other { color: red; }

Example 3

Scss:

 .one{ @at-root .class { color: red; } }

Css:

 .class { color: red; }
  • Hmm, it turns out that just a comma @ at-root with the children can not be listed. That is, for my question, the first 2 answers are not applicable, because they do not give the desired result. A number 3 still does not eliminate the extra recording of the cascade, except that they will be located nearby. - kizoso
  • and & next to it does not work - kizoso
  • @kizoso true, not the most flexible solution, but sometimes better than nothing - user192664
  • Perhaps)) in my case is not very beautiful, but it still helped) - kizoso
  • one
    @kizoso, yeah, understood what the problem is, funny, but solved by simply dragging @at-root to the top of the list and adding '& ' in front of the child selector: codepen.io/anon/pen/MXqPKy - Grundy