CSS Custom-Funktionen und Mixins
Das Modul CSS Custom-Funktionen und Mixins ermöglicht es Entwicklern, wiederverwendbare Blöcke von CSS-Code zu erstellen, die Argumente akzeptieren können, komplexe Logik enthalten (definiert unter Verwendung von Funktionen wie CSS if()
und @media
At-Regeln) und basierend auf dieser Logik Werte zurückgeben können.
CSS Custom-Funktionen werden in @function
At-Regeln definiert und unter Verwendung der <dashed-function>
Syntax aufgerufen. Diese Syntax ähnelt stark der von CSS Custom-Eigenschaften mit dem Unterschied, dass sie Klammern am Ende enthält, die Argumente beinhalten (zum Beispiel --my-function(30px, 3)
). CSS Custom-Funktionen können innerhalb eines jeden Eigenschaftswertes aufgerufen werden und geben einen Wert zurück, basierend auf den in die Funktion übergebenen Argumenten und der Logik in ihr.
CSS Mixins werden in @mixin
At-Regeln definiert und angewendet, indem @apply
At-Regeln innerhalb von Regelsets verschachtelt werden. CSS Mixins definieren eine Reihe von Eigenschaften, die in mehreren Regelsets wiederverwendet und mit Argumenten und Logik angepasst werden können.
CSS Custom-Funktionen und Mixins können optionale Datentypen für ihre Argumente und Rückgabewerte zugewiesen werden, um die übergebenen und zurückgegebenen Werte einzuschränken.
Hinweis: Derzeit haben nur CSS Custom-Funktionen Browser-Support. CSS Mixins werden derzeit in keinem Browser unterstützt.
Referenz
>At-Regeln
Das Modul CSS Custom-Funktionen und Mixins führt auch die @mixin
, @apply
, @contents
und @env
At-Regeln ein. Derzeit unterstützt jedoch kein Browser diese Funktionen.
Deskriptoren
Datentypen und Werte
<dashed-function>
Datentyp
Funktionen
Das Modul CSS Custom-Funktionen und Mixins führt auch lokale env()
Variablen ein. Derzeit wird diese Funktion von keinem Browser unterstützt.
Schnittstellen
Leitfäden
- Verwendung von CSS Custom-Funktionen
-
Dieser Leitfaden lehrt Sie, wie man CSS Custom-Funktionen verwendet und präsentiert einige typische Anwendungsfälle.
Spezifikationen
Specification |
---|
CSS Functions and Mixins Module> |