Sass scss Nesting and multiple classes

Question

I m using Sass   scss  for my current project    Following example   HTML   lt div class  container desc  gt       lt div class  hello  gt          Hello World      lt  div gt   lt  div gt    SCSS   container       background red      color white        hello           padding-left 50px            This works great    Can I handle multiple classes while using nested styles   In the sample above I m talking about this   CSS   container desc       background blue      In this case all div container would normally be red but div container desc would be blue   How can I nest this inside container with Sass

User · Answer

Use  amp  SCSS  container       background red      color white        amp  hello           padding-left 50px           https   sass-lang com documentation style-rules parent-selector

User · Answer

Christoph s answer is perfect  Sometimes however you may want to go more classes up than one  In this case you could try the  at-root and     css features which would enable two root classes to sit next to each other using  amp    This wouldn t work  due to the nothing before  amp  rule     x000D   x000D  container   x000D      background red  x000D      color white  x000D       x000D       desc amp    x000D        background  blue  x000D        x000D   x000D       hello   x000D          padding-left 50px  x000D        x000D    x000D   x000D   x000D    But this would  using  at-root plus    amp       x000D   x000D  container   x000D      background red  x000D      color white  x000D       x000D       at-root  desc   amp     x000D        background  blue  x000D        x000D   x000D       hello   x000D          padding-left 50px  x000D        x000D    x000D   x000D   x000D

User · Answer

You can use the parent selector reference  amp   it will be replaced by the parent selector after compilation   For your example    container       background red       amp  desc         background blue              compiles to      container       background  red     container desc       background  blue      The  amp  will completely resolve  so if your parent selector is nested itself  the nesting will be resolved before replacing the  amp      This notation is most often used to write pseudo-elements and -classes    element       amp  hover             amp  nth-child 1             However  you can place the  amp  at virtually any position you like   so the following is possible too    container       background red       id  amp          background blue              compiles to      container       background  red     id  container       background  blue      However be aware  that this somehow breaks your nesting structure and thus may increase the effort of finding a specific rule in your stylesheet      No other characters than whitespaces are allowed in front of the  amp   So you cannot do a direct concatenation of selector  amp  -  id amp  would throw an error

User · Answer

If that is the case  I think you need to use a better way of creating a class name or a class name convention  For example  like you said you want the  container class to have different color according to a specific usage or appearance  You can do this    SCSS   container     background  red      amp --desc       background  blue            or you can do a more specific name    amp --blue       background  blue          amp --red       background  red          CSS   container     background  red      container--desc     background  blue      container--blue     background  blue      container--red     background  red         The code above is based on BEM Methodology in class naming conventions  You can check this link  BEM     Block Element Modifier Methodology

[sass] Sass .scss: Nesting and multiple classes?

Examples related to sass