これらのミックスインを使用して、Sass/Compass でスタイルシートを作成しました。
$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
this の行でコードを生成する代わりに (マニュアルから)
-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、 my+linear-gradientおよび+single-text-shadowmixin に過剰な s が表示されます。(私は SCSS を使用しません)
何が起こっているのか、正しく機能するコードを出力するにはどうすればよいですか? 参考までに、ここで概説した回避策を使用して Compass を WebStorm (私の IDE) で動作させ、Mac を使用しています。