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

几天前我也有同样的需求。我发现在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 2

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

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

你要创建一个这样的主题文件夹：

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

并设置webpack config：

// 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 3

您可以使用简单的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的更多信息

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

我无法复制一些代码。这是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"

你认为是谁？

SASS Color主题没有重复元素

5 个答案: