Fatal编程技术网
  • css/
  • Css 作用域sass变量

Css 作用域sass变量

css sass

Css 作用域sass变量,css,scope,sass,css-preprocessor,Css,Scope,Sass,Css Preprocessor,有没有办法将作用域添加到sass变量 我希望能够将类附加到我的主体元素。该类将引用其他样式表可以访问的一组颜色 我试过： @mixin theme_one{ $color: #000; } .theme_one{ @include theme_one; } 及 在您的情况下，不需要使用mixin，如果您有许多样式集，那么使用mixin， 如果你有 @mixin theme_one{ $color: #000; height: 50px; } 然后使用Mixin 否

有没有办法将作用域添加到sass变量

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

我试过：

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

在您的情况下，不需要使用mixin，如果您有许多样式集，那么使用mixin， 如果你有

@mixin theme_one{
    $color: #000;
    height: 50px;
}
然后使用Mixin

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

$color: #fff;


.some_class01{

  color: $color;
  background: $color;
}

.some_class22{
  border-color: $color;
}
IMP：变量应该在代码的顶部赋值，这意味着不要在赋值的后面/下面使用它：）

不确定这是否是您要找的。看起来你可能试过类似的方法， 这可能有用。（这可能只是使用！default的问题）

你的身体标签上有一个类

<body class="theme_one">

</body>
根据body标记上使用的类，预先存在的CSS将被覆盖

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


我还没有完全测试过这个，所以有些东西可能需要调整。如果这不能解决你的问题，我希望它至少能给你一些想法。
我自己也遇到过同样的问题。我希望我的网站的不同部分有不同的颜色主题

使用mixin似乎是最好的方法。它非常干燥，使用方便。诀窍不是在主样式块中设置颜色，而是仅使用混音

我将主题颜色设置为顶部的变量，以便可以很好地编辑它们，并将它们设置为列表，以便在不定义大量变量的情况下传递多个值

因此：

将产生如下内容：


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值。
这太冗长了，无法在我的整个样式表中将类添加到每个颜色规则中。更简单的方法是根据父类的存在为变量分配作用域。我很清楚。你有这门课。你的身体标签上有一个主题，对吗？如果该类存在，那么您将替换该类定义的文档中的所有颜色。是这样吗？是的。然后，我想动态加载该类，以便更改主题，然后再问一个问题。你只是在改变“颜色”属性吗？不，几个规则（边框、背景等）的颜色值，你能帮我吗？很好的答案正是我想要的谢谢。如果可以的话，我会把它标记为OP的答案；）我无法让mixin中的变量为应用程序的其他部分工作？帮助！

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



// 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; }