Компас "box-shadow" mixin возвращает Недопустимое значение свойства

Question

По какой-то причине box-shadow mixin возвращает значение, которое считается недействительным браузером. Почему это происходит? Как исправить?

В моей .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

Answer 1

Как и я, я импортировал тень окна таким же образом @import "compass/css3/box-shadow"; и с той же проблемой.

Это должно работать правильно? Почему, я не могу ответить иначе, чем сказать, что мы обновили компилятор SASS от Compass до gulp-sass, который, по моему мнению, основан на узле. (После комментариев, похоже, задействован узел-сасс. Я предпочитаю просто импортировать то, что мне нужно, как вы). Я обнаружил, что Harry сделал это, кажется, цепь не работает.

Чтобы решить эту проблему, я обновил свой импорт заявление@import "compass/css3";, и она работала, как ожидалось. Это заставит вас идти, но не может быть идеальным в зависимости от вашего места.

Надеюсь, это поможет!

Answer 2

У меня была такая же проблема, но потом я понял, что sss сгенерированная версия css не включает «px» для моих значений.

Мне пришлось добавить px для каждого значения, которое я устанавливал. Поскольку это должно быть рядом с числом, то есть 8px, мне пришлось использовать синтаксис интерполяции, показанный ниже.

@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; 
}