更改变量值scss [英] Changing variables values scss

问题描述

我在scss文件中定义了不同的变量，我在一些scss文件中使用了这些变量.

I have defined different variables in my scss file, I used these variables in some scss files.

_variables.scss

_variables.scss

$light-theme: rgba(94,161,215,0.3);
$dark-theme: #5EA1D7;
$darker-theme: #57647A;
$very-dark-theme: #455061;

如何定义3个主题组?像这样:

How can I define 3 groups of themes? Something like:

default-theme {
    $light-theme: rgba(94,161,215,0.3);
    $dark-theme: #5EA1D7;
    $darker-theme: #57647A;
    $very-dark-theme: #455061;
}

dark-theme {
    $light-theme: black;
    $dark-theme: brown;
    $darker-theme: black;
    $very-dark-theme: black;
}

light-theme {
    $light-theme: black;
    $dark-theme: brown;
    $darker-theme: black;
    $very-dark-theme: black;
}

我想根据所选主题更改值. 例如，我有3个按钮，对其进行选择，将更改可变颜色.

I would like to change the values according to selected theme. For example I have 3 buttons, selecting on them, will change the variable colors.

app.component.html

app.component.html

 <button mat-raised-button (click)="onSetTheme('default-theme')">Default</button>
  <button mat-raised-button (click)="onSetTheme('dark-theme')">Dark</button>
  <button mat-raised-button (click)="onSetTheme('light-theme')">Light</button>

app.component.ts

app.component.ts

  onSetTheme(theme) {
    //TODO here I want to change the theme
  }

如何在onSetTheme()函数中更改主题.

How can I change the theme inside onSetTheme() function.

谢谢！

推荐答案

您可以将SASS变量和其他SASS物料以及CSS变量一起使用.

You can use SASS variables and other SASS stuffs AND CSS variables together.

SASS

$body-margin: 0 10px;

:root {
    --bg-color: #000;
    --text-color: #FFF;
}


body {
    background: var(--bg-color);
    color: var(--text-color;
    margin: $margin;
}

JS

onSetTheme(theme) {
    let bgColor, textColor;
    switch(theme) {
      case light:
          bgColor = #FFF;
          textColor = #000;
          break;
      case dark:
          bgColor = #000;
          textColor = #FFF;
          break;
    }
    document.querySelector('body').style.setProperty('--bg-color', bgColor);
    document.querySelector('body').style.setProperty('--text-color', textColor);
}

这篇关于更改变量值scss的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！