Phil Phil - 3 months ago 18
Sass (Sass) Question

Apply wrapper to css block

I have several CSS styles that I am overriding on a specific page. I have a wrapper div around the entire thing, so I was hoping I could add the modified styles to my stylesheet without having to append the wrapper div to each style.

Something like this...

#myWrapper {

#existingStyleImOverriding { width:100%; etc; }
...more styles....

}


That way the "modified" styles only apply if the myWrapper div is around the content. Anyway to do that without having to change each style like...

#myWrapper #existingStyleImOverriding { width:100%; etc; }
....

Answer

It looks like you want to make use of the nesting capability of sass.

It would let you write this:

#myWrapper {
  #override1 { width:100%; }
  #override2 { width:100%; }
  #override3 { width:100%; }
  #override4 { width:100%; }
}

and then it would compile it to this:

#myWrapper #override1 {
  width: 100%;
}
#myWrapper #override2 {
  width: 100%;
}
#myWrapper #override3 {
  width: 100%;
}
#myWrapper #override4 {
  width: 100%;
}