我用 Sass/Compass 用这些 mixin 编写了一个样式表:
$buttonbackground: #50bfec
$darkerbackground: darken($buttonbackground, 30%)
$lighterbackground: lighten($buttonbackground, 20%)
+background-image(linear-gradient(#6b8e23, white))
+single-text-shadow
+box-shadow($lighterbackground 0 0 25px, $darkerbackground 0 0 3px 1px inset)
// all copied from examples
而不是在这行上生成代码(来自手册)
-webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
-moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset
它产生这样的东西
-webkit-box-shadow: compact(#ace1f6 0 0 25px, #106d93 0 0 3px 1px inset, false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(#ace1f6 0 0 25px, #106d93 0 0 3px 1px inset, false, false, false, false, false, false, false, false);
box-shadow: compact(#ace1f6 0 0 25px, #106d93 0 0 3px 1px inset, false, false, false, false, false, false, false, false);
这是行不通的。带有这些奇怪的紧凑函数的代码(在 Sass 或 CSS3 规范中似乎没有)和过多false
的 s 出现在 my+linear-gradient
和+single-text-shadow
mixins 中。(我不使用 SCSS)
发生了什么,我怎样才能让它输出正确和有效的代码?仅供参考,我使用此处概述的解决方法使 Compass 在 WebStorm(我的 IDE)中工作,并且我使用 Mac。