如何从 mixin 更新全局 sass 变量

Question

注意：请不要将其标记为重复，许多像我一样，正在等待答案。我们到处搜索。

1) 我有一个全局变量 $global_var_bg 在组件的 scss 文件中定义为 blue 颜色。

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

3) 在 mixin 函数中我更改全局变量$global_var_bg。

4) 然后访问 scss class 中的全局变量 $global_var_bg。

5) 最后我将 class 分配 到 component.html 中的 div 元素，期望 $global_var_bg 成为 mixin 函数中修改后的 background_color。

6) 但是，它仍然是 $global_var_bg

帮我解决这个问题，

注意：我不想在 mixin 函数中移动类。

@import '~@angular/material/theming';


$global_var_bg: blue; //define a global variable


@mixin dashboard-component-theme($theme) {

  $background: map-get($theme, background);

  //modify the global variable inside the mixin function

  $global_var_bg: mat-color($background, background) !global;
}

//access the global variable inside a class
.some-class {
  background-color: $global_var_bg;
}

<!-- set the background color of the div -->
<!-- which I expect to be the theme's backround color -->
<!-- but still blue-->

<div class="some-class"> random text </div>

Answer 1

在处理不基于 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){ ...}