CODEWITHSUNDEEP
csssasscompass-sass
SVS
SVS

Reputation: 4275

SASS: Child classes according to parent class

Is there a way we can check the parent element class & change child element class properties?

Something like:

if parentClass {
  h1{color: red;}
} else if parentClass2 {
  h1{color: blue;}
}

Want CSS to be like:

.parentClass h1 {
  color: red;
}
.parentClass h2 {
  color: blue;
}

So, if the name of the parent class changes the child class properties also changes.

Thanks in advance :)

Upvotes: 0

Views: 853

Answers (1)

Vangel Tzo
Vangel Tzo

Reputation: 9303

You can't use @if statement in that case but you could do something like this

h1 {
  color: red;

  .parent-1 & {
    color: blue;
  }

  .parent-2 & {
    color: yellow;
  }
}

The output will be 

h1 {
  color: red;
}

.parent-1 h1 {
  color: blue;
}

.parent-2 h1 {
  color: yellow;
}

Upvotes: 4

Related Questions