css - 使用 Sass 根据页面更改站点颜色

Question

试图让 Sass 根据页面更改我的 $brand_clr 颜色变量（通过 body 元素上的类）。例如，首页背景将是蓝色，关于我们将是绿色，联系页面将是橙色等等......想要在不声明一堆颜色变量的情况下做到这一点。该变量将更改按钮颜色、背景颜色、链接颜色等...

$brand_clr: blue;

body.home { background: $brand_clr; } /* This will be blue */
body.about { background: $brand_clr; } /* This will be orange */
body.contact { background: $brand_clr; } /* This will be yellow */

Answer 1

从Sass v3.3开始，您可以尝试使用地图- 听起来这可能是使用它们的一个很好的案例。它们允许您将键及其值存储在一个映射变量中：

$brand_clr: (home: blue, about: orange, contact: yellow);

然后，您可以使用以下函数通过其键访问单个值get-map()：

background: map-get($brand_clr, about);

然后你可以遍历地图并避免大量的硬编码：

@each $brand, $clr in $brand_clr {
  body.#{$brand} {
    background: $clr;
  }
  // and other selectors that change with the brand
}

甚至更好 - 设计一个可以包含在任何规则集中的mixin ：

$color: red !default; // some default color - will be overwritten by brand color
@mixin branding {
  @each $brand, $clr in $brand_clr {
    &.#{$brand} {
      $color: $clr;
      @content;
    }
  }
}

body {
  @include branding {
    background: $color;
  }
}

演示

如果您在Sass <=3.2上，您可以使用列表而不是地图来实现类似的效果：

$brand_clr: (home, blue), (about, orange), (contact, yellow);

在 mixin 中，您可以使用它的索引访问各个值nth()：

$color: null;
@mixin branding {
  @each $brand in $brand_clr {
    &.#{nth($brand,1)} {
      $color: nth($brand,2);
      @content;
    }
  }
}

演示

Answer 2

您可以查找此答案。你只需要像这样调整你的班级..

body.home.color-1 { /*Background Color 1*/ }
body.home.color-2 { /*Background Color 2*/ }
body.home.color-3 { /*Background Color 3*/ }