Question

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

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

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

3）内部，混合函数我更改全局变量 $ global_var_bg 。

4）然后在scss class 中访问全局变量 $ global_var_bg 。

5）最后，我将类分配给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){ ...}

如何从mixin更新全局sass变量

1 个答案: