SCSS从@if内部更改超出范围的变量 [英] SCSS change variable out of scope from inside @if
问题描述
当您想修改函数范围之外的变量时,是否有任何解决方法?:
Is there any workaround for the situation, when you want to modify a variable outside of the scope of your function? :
$ui-theme: 'pink';
@if $ui-theme == "pink" {
$ui-main: #eb82b0;
$ui-secondary: #fff5f9;
$ui-third: #f6c2d9;
} @else {
$ui-main: #ff8067;
$ui-secondary: #fff6e5;
$ui-third: #ffb1a2;
}
a { color: $ui-main; background: $ui-secondary };
我想创建一个名为 ui-theme
的全局变量,它将在下面编写的所有其他代码中定义 $ui-main, $ui-secondary...
定义.似乎在使用像 @if
这样的指令时也应用了变量范围.
I want to create a global variable called ui-theme
which will define $ui-main, $ui-secondary...
in all other code written below the definition. It seems that the variable scope is also applied when using directives like @if
.
有人知道如何实现吗?
推荐答案
你必须在控制块之外初始化你的变量:
You have to initialize your variables outside of the control block:
$ui-theme: 'pink';
$ui-main: null;
$ui-secondary: null;
$ui-third: null;
@if $ui-theme == "pink" {
$ui-main: #eb82b0;
$ui-secondary: #fff5f9;
$ui-third: #f6c2d9;
} @else {
$ui-main: #ff8067;
$ui-secondary: #fff6e5;
$ui-third: #ffb1a2;
}
a { color: $ui-main; background: $ui-secondary };
输出:
a {
color: #eb82b0;
background: #fff5f9;
}
通过 @include
进行主题化可能更好,而不是像那样硬编码变量.
It might be nicer to just do theming via @include
rather than hard coding variables like that.
_pink.scss:
_pink.scss:
$ui-main: #eb82b0;
$ui-secondary: #fff5f9;
$ui-third: #f6c2d9;
styles.scss:
styles.scss:
@include "pink"; // or don't include anything if you want the default colors
$ui-main: #ff8067 !default;
$ui-secondary: #fff6e5 !default;
$ui-third: #ffb1a2 !default;
a { color: $ui-main; background: $ui-secondary };
这篇关于SCSS从@if内部更改超出范围的变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!