SASS: Child classes according to parent class

Question

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 :)

score 4 · Answer 1 · answered Apr 23 '14 at 14:59

4

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;
}

answered Apr 23 '14 at 14:59

Vangel Tzo

Thanks for the answer man, i think that's the only option there. Voted! :) – SVS Apr 23 '14 at 15:13
Is it possible to save class name as a variable so that i can use the same name for class & CSS property value? something like .#{$color} {color: $color} – SVS Apr 23 '14 at 15:20

1 Answers1