欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
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};
 
}

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h63508.shtml