Question

有没有办法为sass变量添加范围？

我希望能够将一个类附加到我的body元素。该类将引用其余样式表可以访问的一组颜色。

我试过了：

@mixin theme_one{
    $color: #000;
}
.theme_one{
  @include theme_one;
}

和

.theme_one{

  $color: #000;
}

Answer 1

我自己也遇到过同样的问题。我想为我网站的不同部分设置不同的颜色主题。

使用mixin似乎是最好的方法。它很干，而且易于使用。诀窍不是在主要样式块中设置颜色，而是仅使用mixin。

我已经将主题颜色设置为顶部的变量，以便可以很好地编辑它们，并且我将它们设置为列表，以便可以传递多个值而无需定义大量变量。

所以：

// Variable Definitions

$defaultColor: black white grey;
$color2:       blue green brown;
$color3:       red white blue;

@mixin colorSet($color: $defaultColor) {
  $link:       nth($color, 1);
  $border:     nth($color, 2);
  $background: nth($color, 3);

  border-color: $border;
  background-color: $background;

  .column {
    border-color: lighten($border, 10%);
  }

  a {
    color: $link;
    &:hover {
      color: darken($link, 15%);
    }
  }

}

// Default colours
body {
  @include colorSet();
}

// Scoped colours
.my-theme-3 {
  @include colorSet($color3);
}

.my-theme-2 {
  @include colorSet($color2);
}

会产生这样的东西：

body {
  border-color: white;
  background-color: grey; }
  body .column {
    border-color: white; }
  body a {
    color: black; }
    body a:hover {
      color: black; }

.my-theme-3 {
  border-color: white;
  background-color: blue; }
  .my-theme-3 .column {
    border-color: white; }
  .my-theme-3 a {
    color: red; }
    .my-theme-3 a:hover {
      color: #b30000; }

.my-theme-2 {
  border-color: green;
  background-color: brown; }
  .my-theme-2 .column {
    border-color: #00b300; }
  .my-theme-2 a {
    color: blue; }
    .my-theme-2 a:hover {
      color: #0000b3; }

编辑：已更新为使用默认的mixin值。

Answer 2

在你的情况下不需要使用mixin，如果你有很多样式的集合，那么使用mixin，即。如果你有

@mixin theme_one{
    $color: #000;
    height: 50px;
}

然后使用Mixin

否则单个属性仅使用变量

$color: #fff;


.some_class01{

  color: $color;
  background: $color;
}

.some_class22{
  border-color: $color;
}

IMP：变量应该在代码的顶部分配，这意味着不要在分配它之后/之后使用它：）

Answer 3

不确定这是否是您要找的。看起来你可能尝试过类似的东西，哪个应该可行。（这可能仅仅是使用！默认值）

你的身体标签上有一个班级..

<body class="theme_one">

</body>

样式表中定义的Sass变量..

//THEME ONE VARIABLES
.theme_one{
    $borderColor:#333 !default;
    $fontColor:#999 !default;
}

//THEME TWO VARIABLES
.theme_two{
    $borderColor:#CCC !default;
    $fontColor:#000 !default;
}

预先存在的CSS将被覆盖，具体取决于在body标签上使用的类。

h1.someheader {
    color:$fontColor;
    border-bottom:1px solid;
    border-color:$borderColor;
}

否则你可能会尝试这样的事情。看起来你可能尝试了类似的东西，但是你的混音似乎有误...请参阅下面的注释。

//mixin used to set variables for properties
@mixin themeOne($fontColor,$borderColor) {
    color:$fontColor;
    border-color:$borderColor;
}

@include themeOne(#000,#CCC);

预先存在的CSS

h1.someheader {
    color:$fontColor
    border-color:$borderColor;
    border-bottom:1px solid;
}

另请注意，在您的mixin示例中，您正在使用$color:#000; ...这将无法正确解释，因为它应该是颜色：＃000;您不能将变量用作选择器除非你做#{$color}:#000;

之类的事情

我还没有完全测试过，所以有些事情可能需要调整。如果这不能解决你的问题，我希望它至少能给你一些想法。

确定sass变量

3 个答案: