Sass specify parent

Question

I'm new to sass and looking for the syntax to specify a hierarchical relationship with code in the child class definition.

Currently I have:

.my-option
  color: #7E57EE

I'd like my sass to compile to the following CSS:

.my-option
  color: #7E57EE

.is-active .my-option
  background-color: #BADA55

I know two ways to accomplish this:

//More verbose than I'd like (and just plain css...)     
.my-option
  color: #7E57EE

.is-active .my-option
  background-color: #BADA55

//Too generic because...don't want the is-active definition to be cluttered
.my-option
  color: #7E57EE

.is-active
  .my-option
    background-color: #BADA55

score 1 · Accepted Answer · answered Jan 22 '15 at 18:23

You can use & at the end of the contextual selector, which will put your child class there for you:

.my-option
  color: #7E57EE

  .is-active &
    background-color: #BADA55

Since you're writing Sass, be sure to indent the second rule so that the compiler will interpret it correctly.

Sass specify parent

1 Answers1