好吧
在组件内部,我使用scss map-get
方法从全局scss文件中定义的变量中获取特定值。
我的班级是这样的。
.class{
transition: background-color 500ms ease-out;
background: var(--background-color);
padding-top: map-get($site-section-padding,var(--padding-top));
padding-bottom: map-get($site-section-padding, var(--padding-bottom));
}
我的变量
$site-section-padding: (
'default': 0px,
'XXS': 8px,
'XS': 16px,
'S': 24px,
'M': 32px,
'L': 40px,
'XL': 56px,
'XXL': 72px
);
让我们来看看paddings属性,map-get
从var(--padding-#)
方法中获取它的值,但是我什么也没得到。我认为map-get
不能解析var
方法。
当我直接使用字符串值(例如map-get($site-section-padding,'XS')
)时,从Map中获取值没有任何问题
因此,任何想法,为什么它不工作,也许有一些替代品来修复它。
1条答案
按热度按时间vsikbqxv1#
不能在Sass中使用CSS变量。
CSS变量在运行时获得值。Sass是一个预处理器。它不能读取一个在运行时获得值的变量的值!
您可以基于SCSS变量创建CSS变量:
然后在Sass函数中使用
$accent-color
,在CSS中使用var(--accent-color)
。