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 开始，您可以尝试maps - 听起来这可能是使用它们的一个非常好的案例。它们允许您将键及其值存储在一个映射变量中：

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

DEMO

如果您使用 Sass＆lt; = 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;
    }
  }
}

DEMO

Answer 2

您可以查找this answer。你只需要调整你的班级......

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

根据页面使用Sass更改网站颜色

2 个答案:

DEMO

DEMO