如何使用SCSS更改基于body类的类格式?

时间:2014-05-11 06:47:26

标签: css sass

我正在创建一个在三个(或更多)不同上下文中使用的Web应用程序,我希望每个上下文都有不同的配色方案。但是,当所有变化都是颜色时,我通常不想维护三种不同的样式表。

例如,假设主题是红色,蓝色和橙色。我的一个样式表描述了链接颜色:

a {
  color: $some_color;
}

我想根据应用于正文的类来拆分它:

body.style1 {
  a {
   color: $red;
  }
}

body.style2 {
  a {
   color: $blue;
  }
}

body.style3 {
  a {
   color: $orange;
  }
}

如果你要改变很多元素的风格,你可以很快看到它变得笨拙。有没有办法更像这样做?

a {
  &closest:body.style1 {
    color: $red
  }
  &closest:body.style2 {
    color: $blue;
  }
  &closest:body.style3 {
    color: $orange;
  }
}

这样我就能以更清晰,更易于维护的方式编写我的scss代码。

2 个答案:

答案 0 :(得分:0)

我更喜欢。定义像body-style

这样的mixin
@mixin body-style($style, $map) {
  body.#{$style} & {
    @each $property, $value in $map {
       #{$property}: $value;
    }
  }
}

然后通过将$ style作为body的样式类和$ map作为css键和值的映射来传递给每个标记。

a {
    @include body-style(style1, (
        color: red, 
        background: white
      )
    );
}

它将返回:

body.style1 a {
  color: red;
  background: white;
}

答案 1 :(得分:0)

看起来你不必首先拥有&,所以这是有效的(至少在3.2.10中):

a {
  body.style1 & {
    color: $red
  }
  body.style2 & {
    color: $blue;
  }
  body.style3 &{
    color: $orange;
  }
}