sass - 如何从 mixin 更新全局 sass 变量
问题描述
注意:请不要将其标记为重复,许多和我一样,正在等待答案。我们到处搜索。
1)我有一个全局变量$global_var_bg在组件的 scss 文件中定义为蓝色。
2) 我在组件的 scss 文件中有一个mixin 函数,它接受 $theme 参数,该参数在应用程序的全局主题更改时传递。
3)在mixin 函数中,我更改了全局变量$global_var_bg。
4) 然后访问scss类中的全局变量$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>
解决方案
在处理不基于 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){ ...}
推荐阅读
- excel - 我们可以在 Excel 中的 IF 函数的“value_if_false”中使用公式吗?
- batch-file - 如何将 Oracle SQL 脚本的返回码传递回调用它的批处理脚本?
- javascript - 如何防止输入被禁用?
- php - SilverStripe 不保存页面内容
- r - 使用自定义功能加速应用,转换为 lapply?
- amazon-web-services - 如何使用 lambda 函数和 boto3 从 s3 存储桶中读取 csv 文件?
- javascript - 使用 Javascript 或 PHP 从数字秤的串行端口获取数据?
- r - 得到tf-idf矩阵后如何计算单个term的tf-idf?
- opencv - Opencv输出中的输出重叠
- angular - 如何将变量添加到离子 iframe?