Wenn SASS- und neue CSS -Funktionen kollidieren

CSS hat kürzlich viele coole Funktionen hinzugefügt, z. B. benutzerdefinierte Eigenschaften und neue Funktionen. Während diese Funktionen unsere Arbeit vereinfachen können, können sie auch interessante Interaktionsprobleme mit Präprozessoren wie SASS erzeugen.

In diesem Artikel wird die Probleme untersucht, die ich begegnet bin, Lösungen und warum ich immer noch halte, Sass ist unerlässlich.

Fehler auftreten

Wenn Sie die neuen Funktionen min() und max() verwendet haben, können Sie bei der Behandlung verschiedener Einheiten auf eine solche Fehlermeldung stoßen: "Inkompatible Einheiten: VH und EM".

Dies liegt daran, dass Sass eine eigene min() -Funktion hat und min() -Funktion von CSS ignoriert . Darüber hinaus können SASS keine Berechnungen unter Verwendung von Werten durchführen, die keine feste Beziehung zwischen zwei Einheiten haben.

Beispielsweise besteht eine feste Beziehung zwischen CM und Einheiten, sodass SASS das Ergebnis von min(20in, 50cm) berechnen kann und bei Verwendung im Code keinen Fehler meldet.

Gleiches gilt für andere Einheiten. Beispielsweise besteht eine feste Beziehung zwischen den Winkeleinheiten: 1 Turn, 1RAD oder 1grad wird immer als gleichem Grad -Wert berechnet. In ähnlicher Weise ist 1S immer 1000 ms, 1 kHz immer 1000 Hz, 1DPPX ist immer 96dpi und 1in ist immer 96px. Deshalb kann SASS zwischen ihnen umgewandelt und in Berechnungen und Funktionen (wie seine eigene min() -Funktion) mischen.

Wenn es jedoch keine feste Beziehung zwischen diesen Einheiten gibt (z. B. die vorherigen Beispiele für EM- und VH -Einheiten), treten Probleme auf.

Es ist nicht nur eine andere Einheit. Der Versuch, calc() min() zu verwenden, führt ebenfalls zu einem Fehler. Wenn ich einen Code wie calc(20em 7px) versuche, erhalte ich einen Fehler, dass " calc(20em 7px) keine Zahl für min ist".

Ein weiteres Problem tritt auf, wenn wir das Ergebnis einer CSS -Variablen oder einer mathematischen CSS -Funktion wie calc() , min() oder max() ) in einem CSS -Filter (z. B. invert() ) verwenden möchten.

In diesem Fall erhalten wir eine Aufforderung, dass "$ color:" var (-p, 0,85) keine gültige Farbe für Invert ist ".

Das gleiche Problem tritt grayscale() auf: " $color: 'calc(.2 var(--d, .3))' ist keine gültige Farbe für Graustufen".

opacity() verursacht auch das gleiche Problem: " $color: 'var(--p, 0.8)' ist keine gültige Farbe für die Deckkraft".

Andere Filterfunktionen-einschließlich sepia() , blur() , drop-shadow() , brightness() , contrast() und hue-rotate() -funktionieren alle ordnungsgemäß mit CSS-Variablen!

Wie sich herausstellt, ist das, was passiert ist min() und max() ähnlich. Sass hat keine integrierte sepia() , blur() , drop-shadow() , brightness() , contrast() , hue-rotate() -Funktionen, hat jedoch einen eigenen grayscale() , invert() und opacity() -Funktionen, und ihr erstes Argument ist $color . Da es den Parameter nicht finden kann, wird ein Fehler geworfen.

Aus dem gleichen Grund haben wir auch Probleme, wenn wir versuchen, CSS -Variablen zu verwenden, in denen mindestens zwei hsl() oder hsla() -Werte aufgeführt sind.

Auf der anderen Seite ist color: hsl(9, var(--sl, 95%, 65%)) ein vollständig gültiges CSS und funktioniert ohne SASS einwandfrei.

Genau das Gleiche passiert mit rgb() und rgba() .

Wenn wir Kompass importieren und versuchen, CSS-Variablen in linear-gradient() oder radial-gradient() zu verwenden, auch wenn wir Variablen in conic-gradient() verwenden (wenn der Browser es unterstützt), erhalten wir auch einen weiteren Fehler.

Dies liegt daran, dass Compass mit linear-gradient() und radial-gradient() -Funktionen ausgestattet ist, aber conic-gradient() wurde nie hinzugefügt.

Das Problem in all diesen Fällen beruht auf Sass oder Kompass, die gleichnamige Funktionen haben, und vorausgesetzt, dies sind die Funktionen, die wir in unserem Code verwenden möchten.

Hoppla!

Lösung

Der Trick hier besteht darin, sich daran zu erinnern, dass SASS fall empfindlich ist, aber CSS nicht sensibel ist .

Dies bedeutet, dass wir Min(20em, 50vh) schreiben können, das SASS nicht als eigene min() -Funktion erkennen wird. Es wird kein Fehler geworfen, es ist immer noch gültig CSS und funktioniert wie erwartet. In ähnlicher Weise kann das Schreiben von HSL() / HSLA() / RGB() / RGBA() oder Invert() die zuvor hatten, die wir zuvor hatten.

Was Gradienten betrifft, bevorzuge ich normalerweise linear-Gradient() und radial-Gradient() da es näher an der SVG-Version liegt, aber es funktioniert gut mit mindestens einem Großbuchstaben.

Warum?

Fast jedes Mal, wenn ich Sass-bezogene Tweets poste, werde ich gewarnt, dass jetzt bei CSS-Variablen Sass nicht mehr verwendet werden sollte. Ich möchte dieses Problem lösen und erklären, warum ich nicht einverstanden bin.

Erstens, obwohl ich in den letzten drei Jahren in fast allen Aspekten in fast allen Aspekten sehr nützlich und verwendet wurde, ist es wichtig zu beachten, dass sie mit calc() geliefert werden. Ich versuche, sie zu vermeiden, um sie nicht zu verwenden, um nicht in einer Situation festzuhalten, in der die Mängel der Verwendung der Nutzung die Vorteile überwiegen.

Wenn es wie eine Konstante funktioniert, ändert sich im Allgemeinen kein Element-zu-Element- oder State-by-State (in diesem Fall ist ein benutzerdefiniertes Attribut definitiv die beste Option) oder reduziert die Anzahl der kompilierten CSS (löst doppelte Probleme, die durch Präfixe erstellt wurden). Dann verwende ich eine SASS-Variable.

Zweitens waren Variablen schon immer ein kleiner Teil des Grundes, warum ich Sass verwende. Als ich Ende 2012 anfing, SASS zu verwenden, wurde es hauptsächlich für Schleifen verwendet. Dies ist eine Funktion, die wir derzeit noch nicht in CSS haben. Während ich einen Teil der Schleife in den HTML -Präprozessor übertragen habe (da er den generierten Code reduziert und später nicht ändert, verwende ich in vielen Fällen immer noch Sass -Loops, z.

(Der folgende Inhalt steht im Einklang mit dem Originaltext und lässt doppelte Teile aus, um Redundanz zu vermeiden.)

Das obige ist der detaillierte Inhalt vonWenn SASS- und neue CSS -Funktionen kollidieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!