从 React 以编程方式更新 Sass (SCSS) 变量

Question

这是一个valid sass code。

$dark-theme: true !default;
$primary-color: #f8bbd0 !default;
$accent-color: #6a1b9a !default;

@if $dark-theme {
  $primary-color: darken($primary-color, 60%);
  $accent-color: lighten($accent-color, 60%);
}

.button {
  background-color: $primary-color;
  border: 1px solid $accent-color;
  border-radius: 3px;
}

因此，可以根据条件更改变量。但是，我们如何从前端更新这些变量呢？我想在前端按一下按钮将 $dark-theme 的值更改为 false？有可能这样做吗？怎么样？

Answer 1

不，无法更改 sass，但您可以这样做

html {
  --lightBtn: #FE016C;
  --lightBg: #fff;
  --lightColor: #232323;
}

html[data-theme='dark'] {
   background: var(--lightBg);
  --lightBtn: #FFBD07;
  --lightBg: #232323;
  --lightColor: #fff;
}

并且按钮将切换属性

        buttonElement.addEventListener('change', function() {
            if(this.checked) {
                trans()
                document.documentElement.setAttribute('data-theme', 'dark')
            } else {
                trans()
                document.documentElement.setAttribute('data-theme', 'light')
            }
        })

其他选择器

h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: var(--lightColor); 
}

color会根据data-theme

变化

信用：https://codepen.io/KaioRocha/pen/MdvWmg