Libsass: 新しいCSSフィルター関数が組み込みのSass関数と競合する

はい、私もこれをヒットしました。

これも打つ。

：+1：

これに関するニュースはありますか？

私は現在@extendに取り組んでいますが、休日の前にこれに到達しようとします！

この問題もあります。

：+1：

darken()とsaturate()も影響を受けることを確認します。 回避策はありますか？

回避策が見つかりました。当面の間、この機能を使用できます。 これはドロップインソリューションである必要があります。

<strong i="6">@function</strong> grayscale($value) {
  <strong i="7">@return</strong> #{ "grayscale(" + $value + ")" };
}

必要に応じて、ベンダープレフィックスを付けることもできます。

<strong i="11">@mixin</strong> filter($properties) {
  // Your vendor prefixing stuff here, I am using Bourbon:
  <strong i="12">@include</strong> prefixer(filter, $properties, webkit moz spec);
}

次に、次のように書くことができます。

<strong i="16">@include</strong> filter(grayscale(100%));

参考までにこれをここに置いてください：
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

@kennethormandy 2つのパラメーターをとるSASS関数の回避

<strong i="7">@function</strong> darken($color, $amount) {
  <strong i="8">@return</strong> #{ "darken(" + $color + "," + $amount ")" };
}

.selector {
    border: 1px solid darken(#f0f1f4, 3);
}

出力：

border: 1px solid darken(#f0f1f4,3"");

…しかし実際にはdarken出力するべきではありません—それは完全に新しい色の値でなければなりません。

うわー、 darken()が機能しないとは思いもしませんでした。 @restlessdesign 、カスタム関数を削除すると、 darken()はすでに機能します。 だからただ書く：

.selector {
    border: 1px solid darken(#f0f1f4, 3);
}

そして、あなたは得るでしょう

.selector {
  border:1px solid #e7e9ee;
}

あなたは（当然のことながら）Sassの機能をCSSフィルターと混同しているのではないかと思います。 私が示した例は、 CSSフィルターであるためにのみ機能しSassのドキュメントによるとgreyscale()関数に基づいて正しい方向に進んでいます。 CSS darken()フィルターがあるので、実際にはlibsassの組み込みのdarken関数を今上書きしているだけです。

私の間違い。 私はメソッドをネストしていて、 darken()カスケードされたadjust-hue代わりにadjust_hueを呼び出しました。 残忍ですが、LibSassが呼び出しを黙って無視するのではなく、実際にエラーを報告したり、無効な出力を表示したりするのが大好きです。 誤警報でごめんなさい。

+1
回避策は正常に機能しますが（@kennethormandyに感謝）、修正されれば便利です。

これについて何かニュースはありますか？ 上記の回避策でコードを難読化しないようにすると、機能しますが、非常に便利です。

同様に解決策を探しています=）

+1

+1

+1

回避策をありがとう@kennethormandy

+1。 ちなみに、解決策をありがとう@kennethormandy 。

これについても問題を開いた（そして閉じた）。 オーバーラップのある構文のような関数をどんどん使い始めるというCSSの根本的な変化があるので、これをクリーンアップするといいでしょう。

ええ@kennethormandy 、回避策のアイデアに感謝しますが、それを行うと、実際のgrayscale()関数を強制終了します。 私はこれに対する本当の修正がすぐに来ることを望んでいます。

別の回避策：代わりにfilter: invert()使用filter: #{"invert()"} 。 引用符の中に好きなものを入れることができ、逐語的に出力されます。

了解しました。3.0でこれを取得できるかどうかを確認します。

ありがとう@tamlyn！ 私はScout.appを使用してきましたが、これは明らかに古いバージョンのSassに残っているため、回避策は実際に機能する高速でシンプルなソリューションです。

@関数filters（$ filter、$ value）{
@return ＃{$ filter}＃{"（" + $ value + "）"}
}

$ prefixes：
"-webkit-"、
「-moz-」、
"-MS-"、
「-o-」、
ヌル;

@mixinプレフィックス（$ property、$ value）{
@each $ prefix in $ prefixes {
＃{$ prefix}＃{$ property}：$ value;
}
}

@restlessdesignこんにちは

だから私は書いた：
* { filter: unquote("filter-function(values)") }

そして、出力は機能します。