当您想要修改函数范围之外的变量时,是否有任何解决方法? :
$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
这样的指令时,变量范围似乎也适用。 .
有谁知道如何实现这一点吗?
最佳答案
您必须在控制 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
进行主题化可能比这样的硬编码变量更好。
_pink.scss:
$ui-main: #eb82b0;
$ui-secondary: #fff5f9;
$ui-third: #f6c2d9;
样式.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 };
关于sass - SCSS 从 @if 内部更改变量超出范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16742238/