指南针“盒子阴影" mixin返回无效的属性值 [英] Compass "box-shadow" mixin returns Invalid property value
问题描述
由于某些原因,box-shadow
mixin返回的值被浏览器视为无效.为什么会发生?如何解决?
For some reason box-shadow
mixin returns value that is considered Invalid by browser. Why does it happen? How to fix?
在我的.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>
标记中返回的内容:
I use compass with webpack's sass
and css
loaders. This is what is returned in a <script>
tag:
UPD :
这似乎是 node-sass 问题. sass-loader
正在使用node-sass
,并且node-sass
与Compass不兼容. https://github.com/sass/node-sass/issues/1004
It looks like this is node-sass issue. sass-loader
is using node-sass
and node-sass
is not compatible with Compass. https://github.com/sass/node-sass/issues/1004
推荐答案
我遇到了同样的问题,但是后来我意识到sass生成的css版本不包含"px"作为我的值.
I had the same issue, but then I realized that the sass generated version of the css was not including the "px" for my values.
我必须将px添加到我设置的每个值中.因为它必须在数字旁边,即8px,所以我必须使用下面显示的插值语法.
I had to add the px to each value I was setting. Because it needs to be next to the number, i.e. 8px, I had to use the interpolation syntax shown below.
@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;
}
这篇关于指南针“盒子阴影" mixin返回无效的属性值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!