您好,登錄后才能下訂單哦!
這篇文章主要介紹“scss變量解析不了怎么解決”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“scss變量解析不了怎么解決”文章能幫助大家解決問題。
scss 變量解析不了的問題,這就尷尬了,我們都知道 scss 變量是如下定義
$width: "100px";
我正常使用的時(shí)候,應(yīng)該是如下:
.box {
width: $width;
}
是的,上面引用變量是沒有任何問題的
現(xiàn)在來看看今天碰到什么問題了呢?
// 跟隨換膚
@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 的時(shí)候,卻報(bào)錯(cuò)了,沒有打包成功,就是這個(gè)變量解析不了的原因,導(dǎo)致路勁找不到對(duì)應(yīng)的 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}去解析 這個(gè)變量就不會(huì)報(bào)錯(cuò),打包也沒有問題了
關(guān)于 scss #{}插值問題總結(jié)如下
一般我們定義的變量都為屬性值,可直接使用,但是如果變量作為屬性或在某些特殊情況下則必須要以 #{$variables} 形式使用。
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
// 應(yīng)用于 class 和屬性
.border-#{$borderDirection} {
border-#{$borderDirection}: 1px solid #ccc;
}
// 應(yīng)用于復(fù)雜的屬性值
body {
font:#{$baseFontSize}/#{$baseLineHeight};
}
關(guān)于“scss變量解析不了怎么解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。