将包装器应用于css块

Question

我有几个CSS样式，我在特定页面上覆盖。我有一个包装器div围绕整个事情，所以我希望我可以将修改后的样式添加到我的样式表，而不必将包装div添加到每个样式。

像这样......

#myWrapper {

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

}

这样，“修改”样式仅在myWrapper div围绕内容时才适用。无论如何要做到这一点，而不必像......那样改变每种风格。

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

Answer 1

看起来您想要使用sass的嵌套功能。

它会让你写下这个：

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

然后它会将其编译为：

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