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!