北斗「的box-shadow」混入返回無效的屬性值

對於被認爲是通過瀏覽器無效的某些原因box-shadow混入返回值。爲什麼會發生？怎麼修？北斗「的box-shadow」混入返回無效的屬性值

在我.scss：

@import "compass/css3/box-shadow"; 

@include box-shadow(0px 1px 5px 1px #c4c3c3);

返回此：

-webkit-box-shadow: compact(0px 1px 5px 1px #c4c3c3, false, false, false, false, false, false, false, false, false); 
-moz-box-shadow: compact(0px 1px 5px 1px #c4c3c3, false, false, false, false, false, false, false, false, false); 
box-shadow: compact(0px 1px 5px 1px #c4c3c3, false, false, false, false, false, false, false, false, false);

我用指南針的WebPack的sass和css裝載機。這就是在<script>標籤返回：

UPD：

它看起來這是node-sass問題。 sass-loader正在使用node-sass和node-sass與Compass不兼容。 https://github.com/sass/node-sass/issues/1004

來源

2017-01-31 Green

正在輸出的值確實是錯誤的。 'box-shadow'屬性並不需要像'compact'等等。但是當我在sassmeister.com上嘗試你的代碼時，輸出是一個非常有效的代碼，與這裏給出的輸出完全不同。 – Harry

['box-shadow' mixin]（http://compass-style.org/reference/compass/css3/box_shadow/）使用了一些輔助函數，這些輔助函數又返回了一些'compact'函數的輸出。看起來這個鏈中的某個地方失敗了（或者）一些額外的包含/導入丟失等等。我找不到確切的問題，因此只需將此信息留在此處作爲評論，以幫助其他人分析。 – Harry

@哈里謝謝 – Green

像你一樣，我以相同的方式導入箱子陰影@import "compass/css3/box-shadow";並且有同樣的問題。

這應該工作正確嗎？爲什麼，我無法回答，除了說我們將Compass上的SASS編譯器更新爲我認爲是基於節點sass的gulp-sass。（在node-sass似乎涉及的評論之後，我更喜歡只導入我需要的東西）。我發現Harry這樣做似乎是鏈條失敗。

要解決此我更新了我的import語句@import "compass/css3";和它的工作如預期。這會讓你走，但取決於你的情況可能不理想。

希望它有幫助！

來源

2017-02-16 01:02:18 Mike

我有同樣的問題，但後來我意識到，青菜產生的CSS版本不包括「PX」爲我的價值觀。

我不得不對PX添加到每個值我設置。由於它需要位於數字的旁邊，即8像素，因此我必須使用下面顯示的插值語法。

@mixin halo($halo-color: $gray-base, $halo-width: 8) { 
    -moz-box-shadow: 0 0 #{$halo-width}px $halo-color; 
    -webkit-box-shadow: 0 0 #{$halo-width}px $halo-color; 
    box-shadow: 0 0 #{$halo-width}px $halo-color; 
}

來源

2017-04-19 15:29:25 Dana

北斗「的box-shadow」混入返回無效的屬性值

回答

相關問題