scss变量解析不了怎么解决
这篇文章主要介绍"scss变量解析不了怎么解决"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"scss变量解析不了怎么解决"文章能帮助大家解决问题。
scss 变量解析不了的问题，这就尴尬了，我们都知道 scss 变量是如下定义
$width: "100px";
我正常使用的时候，应该是如下：
.box {
width: $width;
}
是的，上面引用变量是没有任何问题的
现在来看看今天碰到什么问题了呢？
// 跟随换肤
@mixin bg-theme-image($url) {
@each $theme-name, $theme-map in $themes {
.theme-#{"" + $theme-name} & {
background: url($url + "-" + $theme-name + ".png") no-repeat;
background-size: 100%;
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
background: url($url + "-" + $theme-name + "-2x.png") no-repeat;
background-size: 100%;
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
background: url($url + "-" + $theme-name + "-3x.png") no-repeat;
background-size: 100%;
}
}
}
}
上面的 $theme-name 是解析不出来的，在 本地 npm run dev 是没有任何问题的，但是呢？在我 npm run build 的时候，却报错了，没有打包成功，就是这个变量解析不了的原因，导致路劲找不到对应的 url 路径
修改成如下：
// 跟随换肤
@mixin bg-theme-image($url) {
@each $theme-name, $theme-map in $themes {
.theme-#{"" + $theme-name} & {
background: url($url + "-" + #{$theme-name} + ".png") no-repeat;
background-size: 100%;
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
background: url($url + "-" + #{$theme-name} + "-2x.png") no-repeat;
background-size: 100%;
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
background: url($url + "-" + #{$theme-name} + "-3x.png") no-repeat;
background-size: 100%;
}
}
}
}
给 $theme-name 加上 #{$theme-name}去解析 这个变量就不会报错，打包也没有问题了
关于 scss #{}插值问题总结如下
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用。
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
// 应用于 class 和属性
.border-#{$borderDirection} {
border-#{$borderDirection}: 1px solid #ccc;
}
// 应用于复杂的属性值
body {
font:#{$baseFontSize}/#{$baseLineHeight};
}
关于"scss变量解析不了怎么解决"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。
