Libsass: Neue CSS-Filterfunktionen stehen im Konflikt mit integrierten Sass-Funktionen

Ja, ich habe das auch gerade getroffen.

Schlagen Sie das auch.

: +1:

Irgendwelche Neuigkeiten zu diesem Thema?

Ich arbeite gerade an @extend , aber ich werde versuchen, vor den Ferien zu diesem zu gelangen!

Ich habe auch dieses Problem.

: +1:

Die Bestätigung, dass darken() und saturate() ebenfalls betroffen sind. Gibt es eine Problemumgehung?

Wenn Sie eine Problemumgehung gefunden haben, können Sie diese Funktion in der Zwischenzeit verwenden. Es sollte eine Drop-In-Lösung sein:

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

Sie können dem Hersteller auch ein Präfix voranstellen, wenn Sie möchten:

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

Dann können Sie einfach schreiben:

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

Setzen Sie dies hier nur als Referenz:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

@kennethormandy Haben Sie eine

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

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

Ausgänge:

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

… Aber eigentlich sollte es nicht einmal darken ausgeben - es sollte ein völlig neuer Farbwert sein.

Wow, ich hatte keine Ahnung, dass darken() nicht funktioniert hat. @restlessdesign , wenn Sie Ihre benutzerdefinierte Funktion loswerden, funktioniert darken() bereits. Also schreibe einfach:

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

und du wirst bekommen

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

Ich denke, Sie könnten (verständlicherweise) die Funktionen von Sass mit CSS-Filtern verwechseln. Das Beispiel, das ich gegeben habe, funktioniert nur, weil es ein CSS-Filter ist . Wenn Sie Sass 'Darken oder Sättigen verwenden möchten, sollte dies gemäß den Sass-Dokumenten bereits funktionieren. Wenn Sie die CSS-Filter-Sättigung verwenden möchten, sind Sie auf dem richtigen Weg, basierend auf meiner greyscale() -Funktion. Es gibt einen CSS darken() -Filter, sodass Sie die integrierte Verdunkelungsfunktion von libsass gerade überschreiben.

Mein Fehler. Ich habe Methoden verschachtelt und adjust_hue anstelle von adjust-hue aufgerufen, was zu darken() . Brutal, aber ich finde es toll, dass LibSass tatsächlich Fehler meldet oder ungültige Ausgaben ausgibt, anstatt Anrufe stillschweigend zu ignorieren! Entschuldigung für den Fehlalarm.

+1
Obwohl die Problemumgehung gut funktioniert (danke @kennethormandy), wäre es schön, wenn sie behoben würde.

Gibt es Neuigkeiten zu diesem Thema? Es wäre wirklich schön, den Code mit der oben angegebenen Problemumgehung nicht zu verschleiern, obwohl er funktioniert.

Suche auch nach einer Lösung =)

+1

+1

+1

Vielen Dank an @kennethormandy für die

+1. Übrigens: Danke @kennethormandy für die Lösung.

Ich habe gerade auch ein Problem dazu geöffnet (und geschlossen). Es wäre schön, dies zu bereinigen, da es eine grundlegende Verschiebung von CSS gibt, um mehr und mehr Funktionen wie Syntax mit Überlappung zu verwenden.

Ja @kennethormandy , danke für die Workaround-Idee, aber wenn du das machst, dann grayscale() -Funktion und das ist scheiße! Ich hoffe, dass bald eine echte Lösung dafür gefunden wird.

Eine weitere Problemumgehung: Verwenden Sie anstelle von filter: invert() filter: #{"invert()"} . Sie können alles, was Sie wollen, in die Anführungszeichen setzen und es wird wörtlich ausgegeben.

Okay, lassen Sie mich sehen, ob wir dies in 3.0 bekommen können.

Vielen Dank, dass Sie @tamlyn! Ich habe Scout.app verwendet, das anscheinend immer noch in einer alten Version von Sass enthalten ist. Ihre Problemumgehung ist also eine schnelle, einfache Lösung, die tatsächlich funktioniert.

@Funktionsfilter ($ Filter, $ Wert) {
@return # {$ filter} # {"(" + $ value + ")"}
}}

$ Präfixe:
"-webkit-",
"-moz-",
"-Frau-",
"-Ö-",
Null;

@mixin Präfix ($ Eigenschaft, $ Wert) {
@each $ Präfix in $ Präfixen {
# {$ prefix} # {$ property}: $ value;
}}
}}

@restlessdesign Hallo Leute, ich weiß, dass es sehr spät ist, aber ich hatte gerade dieses Problem und meine Problemumgehung bestand darin, die Filterfunktion zu zitieren und dann unquote () darauf zu verwenden.

Also schrieb ich:
* { filter: unquote("filter-function(values)") }

Und die Ausgabe funktioniert.