动态Sass变量

A · 04月07日

有什么方法可以根据html元素上的类设置颜色变量?还是通过其他方式实现这一目标?

html {

  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;
  }

}
CSScss
回答(2)
时间
路易
2 · 2020-04-07 11:42:16

这是基本主题。您可能想使用mixin或包含一个CSS文件中的多个主题。这是使用包括以下内容的方法:

_theme.scss

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

main.scss

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}

您可以轻松地制作一个混合色,它使用3种颜色作为其参数来代替include:

@mixin theme($accent, $base, $flat) {
    // .. do stuff ..
}
G
GO
1 · 2020-04-07 11:42:16

如果您想使用JavaScript,可以执行以下操作:

  • 您将需要一个带有Id和一个Class(决定使用哪种颜色的HTML元素)的元素。

    ...

  • 接下来,您将需要添加一些JavaSript

    var CurrentColor = document.getElementById(“ Target”)。className;

    如果(CurrentColor ==“ sunrise”)

    {document.exampleTagg.style.exampleProperty =“#37CCBD”; }

    否则,如果(CurrentColor ==“ moonlight”)

    {document.exampleTagg.style.exampleProperty =“#18c”; }

(第一行将声明一个变量,其中包含我们exampleTagg元素的值(具有“ Target” ID的变量),然后if语句将找出我们类的名称(日出或月光),最后,我们将将exampleTagg的背景更改为我们喜欢的颜色)

要出于自己的目的使用此示例,请用一些实际的tagg替换exampleTagg并将exampleProperty更改为有效的Css属性。

请注意,您不需要Scss来完成此工作(您仍然可以使用它),因为JavaScript将访问您编译的CSS文件。

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序