SCSS中的交替变量_Css_Sass - Fatal编程技术网

SCSS中的交替变量

css sass

SCSS中的交替变量,css,sass,Css,Sass,我想根据HTML标记上的类，选择使用哪个变量组。所以我想要这样的东西 SCSS变量组： .pink { $accent: pink; } .green { $accent: green; } .orange { $accent: orange; } 指定要使用的变量组： <html class="pink"> 因此，在本例中，该部分的背景为粉红色。否。这是不可能的。Sass被编译成CSS，CSS被提供给用户。Sass不知道文档的结构您的示例必须这样编写才能正常工

我想根据HTML标记上的类，选择使用哪个变量组。所以我想要这样的东西

SCSS变量组：

.pink {
  $accent: pink;
}

.green {
  $accent: green;
}

.orange {
  $accent: orange;
}

指定要使用的变量组：

<html class="pink">

因此，在本例中，该部分的背景为粉红色。

否。这是不可能的。Sass被编译成CSS，CSS被提供给用户。Sass不知道文档的结构

您的示例必须这样编写才能正常工作：

section.accent {
    .orange & {
        background: orange;
    }

    .pink & {
        background: pink;
    }

    .green & {
        background: green;
    }
}

有没有办法让我做这样的陈述。如果HTML元素上的类是“color-scheme-1”，则$accent:orange。如果HTML元素上的类是“color-scheme-2”，那么$accent:green？您可以在任何地方设置变量。根据您想要使用变量的方式，您将无法获得所需的结果。请更新您的问题，更清楚地了解您正在尝试做什么。对于您的简单示例，变量不是解决问题的方法。我在这里提出了一个新问题。更新您现有的问题比创建一个几乎相同的新问题更合适。开放式提问而不接受答案会损害你的评分，并使人们在未来不太可能帮助你。好吧，对不起，我认为最好将问题留给其他人，因为你的答案可能会将问题解决到他们可以接受的标准。我将在这个基础上投票。谢谢

section.accent {
  background:$accent;
}

section.accent {
    .orange & {
        background: orange;
    }

    .pink & {
        background: pink;
    }

    .green & {
        background: green;
    }
}