无重复元素的 SASS 颜色主题

Question

我需要使用 sass 创建具有多种颜色的主题，但是我看到的所有示例都必须使用不同的变量名来复制 CSS 块。我想要的是在不同的类颜色上使用相同的名称变量。

我脑子里的东西是这样的。

//
// My regular CSS
//
.header
    background-color: $color1
    border-color: $color2

.menu
    background-color: $color2
    border-color: $color1


//
// My colors.sass could be like this
//
.color-green
  $color1: green
  $color2: red

.color-blue
  $color1: blue
  $color2: orange

我认为编译会给我什么：

.color-green .header
    background-color: green
    border-color: red

.color-blue .header
    background-color: blue
    border-color: orange

.color-green .menu
    background-color: red
    border-color: green

.color-green .menu
    background-color: orange
    border-color: blue

这可能吗？

Answer 1

我也有同样的需求，然后我为 webpack 编写了一个加载器来解决这个问题，你可以查看DEMO 看看它是如何工作的，就像你期望的那样。

这个loader用不同的主题变量编译sass，你可以通过sass文件和javascript注册主题。

你会像这样创建一个主题文件夹：

• 主题
  • 主题-a.scss
  • 主题-b.scss
  • 主题-c.scss

并设置 webpack 配置：

// webpack1
module: {
  loaders: [
    {
      test: /\.scss$/,
      loader: 'vue-style-loader!css-loader!sass-loader!sass-themes-loader'
    }
  ]
},
'sassThemes': {
  themePath: "absolute path of theme folder",
  //defaultTheme: "default theme name",
  //excludeTheme: ["themeName", "themeName"],
  //only: ["path of sass file"]
}

然后如果你导入一个sass文件，它会自动主题化：

div {
  color: $text-color;
  font-size: 14px;
}

将是：

div {
  color: $text-color;
  font-size: 14px;
}
.theme-a div {
  color: 'color-a'
}
.theme-b div {
  color: 'color-b'
}
.theme-c div {
  color: 'color-c'
}

更多用法，请查看DEMO

Answer 2

我无法运行重复的某些代码。这是带有代码的Github： https://github.com/locaweb/locawebstyle/tree/v2/source/assets/stylesheets/locastyle/layout/colors

解决方案如下：

我创建了一个 shared.sass，我在其中放置了我需要更改颜色的所有元素，例如：

shared.sass

#{$theme-color}

    body {
      background-color: $color2;
    }

    p {
      color: $color1;
    }

然后我用我应用的颜色名称创建其他文件。该文件将在变量中包含调色板，如下所示：

green.sass

$theme-color: ".color-green"

$color1: #000
$color2: #FFF
...

@import "shared"

还有一个 colors.sass 导入所有文件：

@import "green"
@import "shared"

你们怎么看？

Answer 3

几天前我也有同样的需求。我发现在 Sass 中，您可以拥有一个多维列表，因此您可以创建一个变量来保存所有变量，而不是构建单个变量，然后循环遍历它们：

$themes: news #f44f74 #f497ac, sports #5cbb00 #b2e581, entertainment #00afc4 #92d3db 

@each $theme in $themes
  $area: nth($theme, 1)
  $colorA: nth($theme, 2)
  $colorB: nth($theme, 3)

  //you can use apply a class to the body so you can customize everything else easily
  div.#{$area}
    h1
      color: $colorA
      border-bottom: 2px solid $colorB
    p
      color: desaturate($colorA, 60%)

看看我在 Codepen 上准备的这个例子：http://codepen.io/renatocarvalho/pen/CxcEJ

Answer 4

我认为 sass mixins 是这里的答案。

Imo，最好的方法是创建名为 ex 的 mixin。 generate_theme，并将颜色作为参数传递。

类似这样：[注意：我使用 scss 语法]

@mixin generate_theme ($name: 'green', $color: green) { // pass as many colors you need...
    .color-#{$name} .header {
        background-color: $color;
    }
    .color-#{$name} .menu {
        background-color: $color;
    }
}

所以这个 mixin 有两个参数，但它可以有更多参数（比如我认为的调色板？），它有一些默认值（绿色）。如果您想使用十六进制值，参数 $name 可能很有用（像 .color-#000322 这样的类不太易于维护）。

那么你只需要像这样包含你的 mixin：

@include generate_theme; // default colors
@include generate_theme('oceanlike', #000000); 

所以输出将是：

.color-green .header {
  background-color: green;
}

.color-green .menu {
  background-color: green;
}

.color-oceanlike .header {
  background-color: black;
}

.color-oceanlike .menu {
  background-color: black;
}

Answer 5

您可以使用简单的 if 语句对相同的变量（$color1 和 $color2）进行不同的赋值，检查额外变量的值，例如

$theme: light;

  @if $theme == light {

    $color1: green;
    $color2: red;

  } 
  @else if $type == dark {

    $color1: blue;
    $color2: orange;

  } 
  @else {
     /* fallback values */
  }

为了可扩展性，我只是建议将此代码包装在 themes.scss 文件中，并将其包含在主 sass 文件的开头。当您想更改主题时，只需更改 $theme 变量的值即可。

您可以在官方网站上找到有关the @if directive的更多信息