Как обновить глобальную переменную sass из миксина

Question

Примечание: Пожалуйста, не отмечайте его как дубликат, многие, как и я, ждут ответа. мы искали везде.

1) У меня есть глобальная переменная $ global_var_bg , определенная как синий цвет в файле scss компонента.

2) У меня есть функция mixin в файле scss компонента, которая принимает аргумент $ theme, который передается при изменении глобальной темы для приложения.

3) Внутри функция смешивания I изменение глобальная переменная $ global_var_bg .

4) Затем получите доступ к глобальной переменной $ global_var_bg внутри scss class .

5) наконец, я присваиваю class элементу div в component.html, ожидая, что $ global_var_bg будет изменено background_color внутри функции mixin.

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

Пример использования темы mixin

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