Ordentliche optionale benutzerdefinierte Eigenschaftswerte Trick

Umgang mit optionalen benutzerdefinierten Eigenschaftenwerten in mehrwertigen CSS-Eigenschaften wie transform erfordert manchmal einige Tricks. Angenommen, Sie haben ein Element, dessen transform mehrere Werte enthält:

 .el {
  Transformation: Translate (100px) Skala (1,5) Schräg (5DEG);
}

Wenn Sie nach Bedarf nur bestimmte Transformationswerte anwenden möchten, können Sie benutzerdefinierte Eigenschaften verwenden, um die Optionalität zu erreichen:

 .el {
  / * |-Standard --- | |-optional-|
  Transformation: Translate (100px) var (-Transformation);
}

Wenn jedoch nicht definiert ist, ist transform --transform . Die Lösung besteht darin, einen Nullwert als Fallback -Wert zu verwenden:

 .el {
  Transformation: Translate (100px) var (-Transformation,);
}

Auf den Unterschied achten? Hier wird ein Nullwert ( , ) als Fallback definiert. Nach der Spezifikation:

Im Gegensatz zu der üblichen Verbrückungsregel (die es erfordert, wenn Kommas keine Werte trennen), muss in var() ein separates Komma (nichts danach) als gültig angesehen werden, was einen leeren Fallback -Wert angibt.

Dies ähnelt der CSS -Technik für benutzerdefinierte Eigenschaften, bei der benutzerdefinierte Eigenschaften verwendet werden, um Platzwerte zu haben.

Demo

Dieser Trick funktioniert mit einem mehrwertigen CSS-Attribut. Zusätzlich zur transform verwendet die folgende Demonstration auch text-shadow , background und filter .

Für einige Eigenschaften, die mehrere Werte (z. B. text-shadow ) akzeptieren, ist eine spezielle Handhabung erforderlich, da sie nur für Komma-Separatoren gelten. In diesen Fällen wissen Sie (als Code -Autor), wenn Sie eine CSS -benutzerdefinierte Eigenschaft definieren, dass sie nur im Kontext des definierten Werts der benutzerdefinierten Eigenschaft verwendet wird. Dann sollten Sie ein Komma direkt vor dem ersten Wert in der benutzerdefinierten Eigenschaft wie SO einfügen:

 --Text-Shadow:, 0 0 5px schwarz;

Dies begrenzt natürlich die Möglichkeit, diese Variable zu verwenden, wenn der Attributwert eindeutig ist. Dies kann jedoch gelöst werden, indem eine "Ebene" von Variablen erstellt wird, d. H. Benutzerdefinierte Eigenschaften auf eine benutzerdefinierte Eigenschaften auf niedrigerer Ebene verweisen.

Beachten Sie den Sass -Compiler

Während ich diesen Trick untersuchte, stellte ich fest, dass der Sass -Compiler einen Fehler gibt, der leere Fallback -Werte ( , ) entfernt, was nicht mit der Spezifikation übereinstimmt. Ich habe diesen Fehler gemeldet und hoffe, dass er bald behoben wird.

Als vorübergehende Problemumgehung können Sie Fallback -Werte verwenden, die beispielsweise keine Rendering verursachen:

 Transformation: Translate (100px) var (-Transformation, Skala (1));

Das obige ist der detaillierte Inhalt vonOrdentliche optionale benutzerdefinierte Eigenschaftswerte Trick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!