How to select grand parent on SCSS inside BEM modifier?

Question

While i was trying BEM and SCSS. Using SCSS to select modifier and Elements is easy but the hard part is while using modifier and referencing element that doesn't have modifier class is breaking the neat approach i made. Here is the quick example what i am trying to do.

This is the HTML

<div class="icon-box icon-box--red">
   <h3 class="icon-box__title>This is title</h3>
</div>

And the SCSS

.icon-box {
  &__title {
    color: black;
  }

  &--red {
    &__title {
      color: red;
    }
  }
}

And the output css is

.icon-box {
   background: white;
}
.icon-box__title {
  color: black;
}
.icon-box--red {
  background: black;
}
.icon-box--red__title {
  color: red;
}

The compiled CSS is correct but i want to achieve this

.icon-box {
   background: white;
}
.icon-box__title {
  color: black;
}
.icon-box--red {
  background: black;
}
.icon-box--red .icon-box__title {
  color: red;
}

While i can reference it using name .icon-box__title but i want to go back to grand parent. Is there any approach i can use?

Thank you

score 1 · Answer 1 · answered Dec 15 '16 at 11:09

Using the ampersand only looks at that paticular styles parent hence why your SASS is compiling like that.

Here are two options for you:

    .icon-box {

        &__title {

            color: black;

        }

        &--red {

            color: red;

        }

        &__title {

            color: red;

        }
    }


   .icon-box {

        &__title {

            color: black;

        }

        &--red, &__title  {

            color: red;

        }
    }

Like i already said i want to select grandparent. This is known issue to SASS. Thanks — Sanjeev Shrestha, Dec 16 '16 at 04:37

score -1 · Accepted Answer · answered Dec 15 '16 at 08:54

-1

Finally, i thought a lot and found a way around not sure why there is not a way around to select grandparent on SCSS.

Here is how i am doing that

.icon-box {
  &__title {
    color: black;
  }

  &--red {
    .icon-box {
      &__title {
        color: red;
     }
  }
}

Hope someone will find it usefull

answered Dec 15 '16 at 08:54

Sanjeev Shrestha

27
9

This is very nearly the same as the above answer. Could you either accept the answer above as the correct one or select yours as the correct one. – Josh Bolton Dec 15 '16 at 11:42

How to select grand parent on SCSS inside BEM modifier?

2 Answers2