首页 文章

根据选择器在Sass中设置变量

提问于
浏览 次
21

我有一个网站使用了一些不同的“主要”颜色 . 一般的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，但我想知道是否有更好的方法来做这个 - 可能有一个功能？我对萨斯不是那么好，所以任何帮助都会受到赞赏 .

css variables sass

6 回答

  • 21

    我认为mixin就是答案 . （As I wrote，变量不起作用 . ）

    @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 compiles to这个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);
}
    回复于
  • 9

    如果你真的想要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 content($main, $default) 并使用 nth 在 @each 中调用它，就像上面的代码一样，但重点是你不必写出来每个课程的规则 .

    EDIT 在Creating or referencing variables dynamically in Sass和Merge string and variable to a variable with SASS上有很多有趣的答案 .

    回复于
  • 0

    如果您不想为每种颜色使用变量，则可以将一个变量用于各种颜色 . 在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);
}
    回复于
  • 1

    您还可以创建使用＆符号父选择器的混音 . http://codepen.io/juhov/pen/gbmbWJ

    @mixin color {
  body.blue & {
    background: blue;
  }
  body.yellow & {
    background: yellow;
  }
}
    回复于
  • 1

    更新：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);
}
    回复于
  • 1

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

    $color1: red;
$color2: yellow;

header { background: $color1; }

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

    似乎适合我 .

    回复于

相关问题