网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

scss变量解析不了怎么解决

这篇文章主要介绍“scss变量解析不了怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“scss变量解析不了怎么解决”文章能帮助大家解决问题。

创新互联专注于企业成都全网营销推广、网站重做改版、无锡网站定制设计、自适应品牌网站建设、HTML5电子商务商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为无锡等各大城市提供网站开发制作服务。

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变量解析不了怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


网页标题:scss变量解析不了怎么解决
网站链接:http://bjjierui.cn/article/ijpgjp.html

其他资讯