如何从mixin更新全局sass变量

注意：请不要将其标记为重复，许多人和我一样，都在等待答案。我们到处都找遍了。

1） 在组件的scss文件中，我有一个全局变量$global\u var\u bg定义为蓝色

2） 我在组件的scss文件中有一个mixin函数，它接受$theme参数，该参数在应用程序的全局主题更改时传递

3） 内部混合函数I更改全局变量$global\u var\u bg

4） 然后访问scss类中的全局变量$global\u var\u bg

5） 最后，我将类分配给component.html中的div元素，期望$global\u var\u bg是mixin函数中修改的背景颜色

6） 但是，它仍然$global\u var\u bg

帮我解决这个问题,

注意：我不想将类移动到mixin函数中

@import'~@angular/material/theming'；
$global_var_bg:蓝色//定义一个全局变量
@mixin仪表板组件主题（$theme）{
$background:map get（$theme，background）；
//修改mixin函数中的全局变量
$global_var_bg:mat color（$background，background）！global；
}
//访问类中的全局变量
.某个班级{
背景色：$global_var_bg；
}

随机文本

在处理不基于CSS变量的主题时，您可以执行以下操作：

使用函数映射的示例

//  –––––––––––––––––––––––––––––-
//  _theme.colors.scss
//  –––––––––––––––––––––––––––––- 
//  default theme 
$theme: light !default;

//  theme colors 
$theme-colors: (
    light: (
       text: black,
       back: white
    ),
    dark: (
       text: white,
       back: black
    )
);

// color function returning the color value 
// based on color name and theme
@function color($name, $theme: $theme){
    @return map-get(map-get($theme-colors, $theme), $name);
}


//  –––––––––––––––––––––––––––––-
//  _my.component.scss
//  –––––––––––––––––––––––––––––-   
@import '_theme.colors.scss';


.class {
    color: color(text);       // black (using the default light theme)
    background: color(back);  // white (using the default light theme) 
}

.class {
    color: color(text, dark);       // white (using the passed dark theme)
    background: color(back, dark);  // black (using the passed dark theme) 
}

//  switching global theme will take effect in all 
//  classes after the point of change 
$theme: dark;

.class {
    color: color(text);       // white (using the now default dark theme)
    background: color(back);  // black (using the now default dark theme) 
}

使用主题混合的示例

//  –––––––––––––––––––––––––––––-
//  _theme.colors.scss
//  –––––––––––––––––––––––––––––- 
//  default theme 
$theme: light !default;

 @mixin theme($theme: $theme){

    @if $theme == light {
        $color-text: silver !global;
        $color-back: white !global;
    }
    @if $theme == dark {
        $color-text: black !global;
        $color-back: white !global;
    }

    //  passed content (classes)
    @content;
}


//  –––––––––––––––––––––––––––––-
//  _my.component.scss
//  –––––––––––––––––––––––––––––-    
@import '_theme.colors.scss';


@include theme {
    .class {
        color: $color-text;       // black (using the default light theme)
        background: $color-back;  // white (using the default light theme) 
    }
}

@include theme(dark) {
    .class {
        color: $color-text;       // white (using the passed dark theme)
        background: $color-back;  // black (using the passed dark theme) 
    }
}

//  switching global theme will take effect in all 
//  classes after the point of change 
$theme: dark;

@include theme {
    .class {
        color: $color-text;       // white (using the now default dark theme)
        background: $color-back;  // black (using the now default dark theme) 
    }
}

注意

在全局级别更改主题可能会导致无法预见的问题（例如更改导入顺序时）——为什么您可以通过在函数和mixin中定义默认值来选择不公开主题

@function color($name, $theme: light){ ... }
@mixin theme($theme: $theme: light){ ...}

---

在定义类之前，必须调用mixin。您的代码只定义了mixin。我正在从register_theme.scss调用mixin，当用户更改主题时会调用它。。。多亏了@Jacob E的回答，我现在有了这个想法。再过几天，我会发布完整的答案。不能通过应用程序交互动态调用SCSS文件或SASS mixin。SASS是源代码，而不是实时CSS代码。您可以使用提供的答案实现您的需求，但您在标题中提出的问题与Jacob E提供的解决方案无关。如果您完全更改标题以反映应用程序需求问题，这将有助于搜索/未来用户，不是SASS变量问题，这是次要的。答案很好…，现在我有了这个想法。。。非常感谢。很快我将分享我的实现…现在我已经实现了，就像我在这篇文章中发布的最后一个答案一样。你的答案更简单。。。我将实现您的技术，并将在几天后与您分享。很高兴听到：-）。如果有问题，请发表评论