如何从 mixin 更新全局 sass 变量

Question

Note: Please Don't Mark it as duplicate, many like myself, are waiting for the answer. we've searched everywhere.

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

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

3) Inside mixin函数我改变全局变量$global_var_bg.

4) 然后访问全局变量$global_var_bg inside an scss class.

5) 最后我分配 class 给 div[= component.html 中的 47=] 元素，期望 $global_var_bg 是修改后的 background_color混合函数。

6) 但是，它仍然是 $global_var_bg

Help me to solve this problem,

Note: I don't want to move the class inside the mixin function.

@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; }

   <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){ ...}

如何从 mixin 更新全局 sass 变量

How to update the global sass variable from a mixin

sass

mixins

angular-material2