CODEWITHSUNDEEP
sass
theorise
theorise

Reputation: 7425

Prepending parent selectors in SCSS

I want to nest selectors by prepending the parent selector in SCSS.

The basic selector is:

.selector-class .selector-class__element {}

Here is the HTML:

<div class="selector-class">
    <div class="selector-class__element"></div>
</div>

(A) Here is the desired result in SCSS:

.selector-class {
    .selector-class__element {

    }
}

(B) This is the idea behind how I want to do it: (Does not work)

.selector-class {
    &__element {

    }
}

Is there a more effecient way of doing it than using the method in (A) ?

Upvotes: 2

Views: 2490

Answers (2)

cimmanon
cimmanon

Reputation: 68309

You just need to add an extra ampersand at the beginning:

.selector-class {
    & &__element {
      background: red;
    }
}

Upvotes: 3

Santosh
Santosh

Reputation: 3807

You need to try this one. This is just an example for both class and element. You may try any one of them.

.selector-class {
   &.class, &div { background: blue; }
}

EDIT Below is the interpolation method of concatenating string. 

.selector-class {
   &#{'__element'} { background: blue; }
}

CSS

.selector-class .selector-class__element { background: blue; }

more about interpolation

interpolation

Upvotes: 1

Related Questions