1

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

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

我努力了：

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

和

.theme_one{

  $color: #000;
}
4

3 回答 3

3

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

使用 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 值。

于 2013-02-04T11:43:16.463 回答
0

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

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

然后使用 Mixin

否则对于单个属性，仅使用变量

$color: #fff;


.some_class01{

  color: $color;
  background: $color;
}

.some_class22{
  border-color: $color;
}

IMP：变量应该在你的代码顶部分配，这意味着不要在你分配它的地方之后/之下使用它:)

于 2012-08-21T11:26:07.697 回答
0

不确定这是否是您正在寻找的。看起来你可能已经尝试过类似的东西，这应该可以工作。（这可能只是使用 !default 的问题）

你的身体标签上面有一个类..

<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 似乎有一个错误......请参阅下面的注释。

//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;......这不会被正确解释，因为它应该是 color:#000; 除非您执行类似的操作，否则您不能将变量用作选择器#{$color}:#000;

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

于 2012-08-23T17:01:02.147 回答