41

我有一个使用几种不同“主要”颜色的网站。一般的 HTML 布局保持不变，只是颜色会根据内容而变化。

我想知道是否可以根据 CSS 选择器设置颜色变量。这样我可以用一些变量来为我的网站设置主题，然后让 Sass 填充颜色。

例如：

$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;

body.class-1 {
  color-default: $color-1;
  color-main: $color-2;
}
body.class-2 {
  color-default: $color-3;
  color-main: $color-4;
}

/* content CSS */
.content {
  background: $color-default;
  color: $color-main;
}

我正在考虑为此使用 mixin，但我想知道是否有更好的方法来做到这一点 - 也许使用函数？我对 Sass 不是很好，所以任何帮助都将不胜感激。

4

8 回答 8

37

我认为mixin就是答案。（正如我所写，变量不起作用。）

@mixin content($color-default, $color-main) {
  background: $color-default;
  color: $color-main;
}

body.class-1 {
  @include content(#444, #555);
}

body.class-2 {
  @include content(#666, #777);
}

SCSS编译成这个 CSS：

body.class-1 {
  background: #444444;
  color: #555555; }

body.class-2 {
  background: #666666;
  color: #777777; }

如果您想在 SCSS 文件中将颜色值组合在一起，您可以将变量与 mixin 结合使用：

$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;

body.class-1 {
  @include content($color-1, $color-2);
}

body.class-2 {
  @include content($color-3, $color-4);
}
于 2013-08-07T19:46:38.857 回答
18

作为 sass 文档很好地解释（https://sass-lang.com/documentation/variables）：

  • Sass 变量都被 Sass 编译掉了。CSS 变量包含在 CSS 输出中。

  • CSS 变量对于不同的元素可以有不同的值，但 Sass 变量一次只有一个值。

  • Sass 变量是命令式的，这意味着如果你使用一个变量然后改变它的值，之前的使用将保持不变。CSS 变量是声明性的，这意味着如果您更改值，它将影响早期使用和以后的使用。

我们可以利用 sass 和 css 变量的组合来实现你想要的：

//theme colors
$red-cosmo: #e01019;
$green-cosmo: #00c398;
$primary-color: var(--primary-color);
body{
  --primary-color: #{$red-cosmo};
}
body.univers-ride{
  --primary-color: #{$green-cosmo};
}

因此，当我调用我的 sass 变量 $primary-color 时，它将打印为我的 css 变量“var(--primary-color)”，仅当我的身体具有“univers-ride”类时才会扩展为 $green-cosmo它将是 $red-cosmo 默认颜色。

于 2020-07-13T09:42:04.047 回答
14

如果您真的想变得 hacky，您还可以在单​​个变量中定义不同的配色方案，例如$scheme1: class1 #333 #444，其中第一个值始终是名称，然后是该方案中的所有颜色。

然后您可以使用@each：

// Define your schemes with a name and colors
$scheme1: class1 #444 #555;
$scheme2: class2 #666 #777;
$scheme3: class4 #888 #999;

// Here are your color schemes
$schemes: $scheme1 $scheme2 $scheme3;

@each $scheme in $schemes {
  // Here are the rules specific to the colors in the theme
  body.#{nth($scheme, 1)} .content {
    background-color: nth($scheme, 2);
    color: nth($scheme, 3);
  }
}

这将编译为：

body.class1 .content {
  background-color: #444444;
  color: #555555; }

body.class2 .content {
  background-color: #666666;
  color: #777777; }

body.class4 .content {
  background-color: #888888;
  color: #999999; }

显然，如果你不想在你的选择器中组合body.class1和.content，你可以指定一个 mixin并在using中content($main, $default)调用它，就像在上面的代码中一样，但重点是你不必为每个写出规则你的课。@eachnth

编辑关于在 Sass 中动态创建或引用变量以及使用 SASS 将字符串和变量合并到变量中有很多有趣的答案。

于 2013-08-08T07:22:37.853 回答
2

您还可以创建使用 & 父选择器的混合。http://codepen.io/juhov/pen/gbmbWJ

@mixin color {
  body.blue & {
    background: blue;
  }
  body.yellow & {
    background: yellow;
  }
}
于 2015-01-13T08:22:04.030 回答
2

更新：它的 2017 年和变量确实有效！

@mixin word_font($page) {
  @font-face {
    font-family: p#{$page};
    src: url('../../static/fonts/ttf/#{$page}.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  .p#{$page} {
   font-family: p#{$page};
  }
}

// Loop and define css classes 
@for $i from 1 through 604 {
 @include word_font($i);
}
于 2017-01-12T05:41:35.253 回答
1

如果您不想为每种颜色使用一个变量，您可以为所有种类的颜色使用一个变量。在 mixin 中，您可以使用 选择正确的颜色nth。例如，如果您将颜色的索引写为1，那么您将获得颜色变量中的第一个颜色。

$colors: #444, #555, #666, #777;

@mixin content($color-default-num, $color-main-num) {
  background: nth($colors, $color-default-num);
  color: nth($colors, $color-main-num);
}

body.class-1 {
  @include content(1, 2);
}
于 2013-08-07T20:31:48.997 回答
1

对我来说，我的问题的明确答案是创建一个地图并通过它们循环如下：

$pallettes: (
  light-theme: (
    container-color: red,
    inner-color: blue,
  ),
  dark-theme: (
    container-color: black,
    inner-color: gray,
  ),
);

@each $pallette, $content in $pallettes {
  .main.#{$pallette} {
    background-color: map-get($content, container-color);
    .inner-div {
      background-color: map-get($content, inner-color);
    }
  }
}
于 2019-05-14T13:39:57.417 回答
-1

您可以简单地在类包装器中覆盖您的 scss 变量：

$color1: red;
$color2: yellow;

header { background: $color1; }

.override-class {
  $color1: green;
  header { background: $color1; }
}

似乎对我有用。

于 2016-07-19T14:09:13.163 回答