Sass .scss: Nesting and multiple classes?

Question

I'm using Sass (.scss) for my current project.

Following example:

HTML

<div class="container desc">     <div class="hello">         Hello World     </div> </div> 

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?

Answer 1

You can use the parent selector reference &, it will be replaced by the parent selector after compilation:

For your example:

.container {     background:red;     &.desc{        background:blue;     } }  /* compiles to: */ .container {     background: red; } .container.desc {     background: blue; } 

The & will completely resolve, so if your parent selector is nested itself, the nesting will be resolved before replacing the &.

This notation is most often used to write pseudo-elements and -classes:

.element{     &:hover{ ... }     &:nth-child(1){ ... } } 

However, you can place the & at virtually any position you like^*, so the following is possible too:

.container {     background:red;     #id &{        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 &. So you cannot do a direct concatenation of selector+& - #id& would throw an error.

Answer 2

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;    &--desc {     background: blue;   }    // or you can do a more specific name   &--blue {     background: blue;   }    &--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