CSS
Benutzerdefinierte Eigenschaften (Variablen)

Einführung

Syntax

• : root {} / * Pseudoklasse, die eine umfassendere Definition von Variablen ermöglicht * /
• - Variablenname: Wert ; / * Variable definieren * /
• var (- Variablenname, Standardwert ) / * definierte Variable mit Standardwert-Fallback verwenden * /

Bemerkungen

Variable Farbe

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
  border: 1px solid var(--red);
}

Variable Abmessungen

:root {
  --W200: 200px;
  --W10: 10px;
}
.Bx2 {
  width: var(--W200);
  height: var(--W200);
  margin: var(--W10);
}

Variable Kaskadierung

CSS-Variablen kaskadieren auf ähnliche Weise wie andere Eigenschaften und können sicher wiederhergestellt werden.

Sie können Variablen mehrmals definieren, und nur die Definition mit der höchsten Spezifität gilt für das ausgewählte Element.

Annahme dieses HTML:

<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>

Wir können dieses CSS schreiben:

.button {
  --color: green;
  padding: .5rem;
  border: 1px solid var(--color);
  color: var(--color);
}

.button:hover {
  --color: blue;
}

.button_red {
  --color: red;
}

Und bekomme dieses Ergebnis:

Gültig / Invaliden

Benennung Wenn Sie CSS-Variablen benennen, enthält sie nur Buchstaben und Bindestriche wie andere CSS-Eigenschaften (z. B. Zeilenhöhe, -moz-box-size), sollte jedoch mit doppelten Bindestrichen (-) beginnen

//These are Invalids variable names
--123color: blue;
--#color: red;
--bg_color: yellow
--$width: 100px;

//Valid variable names
--color: red;
--bg-color: yellow
--width: 100px;

CSS-Variablen unterscheiden zwischen Groß- und Kleinschreibung.

/* The variable names below are all different variables */
--pcolor: ;
--Pcolor: ;
--pColor: ;

Leer gegen Leerzeichen

/* Invalid */
    --color:;

/* Valid */
  --color: ; /* space is assigned */

Verkettungen

    /* Invalid - CSS doesn't support concatenation*/
    .logo{
        --logo-url: 'logo';
        background: url('assets/img/' var(--logo-url) '.png');
    }

    /* Invalid - CSS bug */
    .logo{
        --logo-url: 'assets/img/logo.png';
        background: url(var(--logo-url));
    }

    /* Valid */
    .logo{
        --logo-url: url('assets/img/logo.png');
        background: var(--logo-url);
    }

Vorsicht bei der Verwendung von Einheiten

    /* Invalid */
    --width: 10;
    width: var(--width)px;

    /* Valid */
    --width: 10px;
    width: var(--width);

    /* Valid */
    --width: 10;
    width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
    width: calc(1em * var(--width));

Mit Medienanfragen

Sie können Variablen innerhalb von Medienabfragen neu setzen und diese neuen Werte an jedem Ort kaskadieren lassen, was bei Vorprozessorvariablen nicht möglich ist.

Hier ändert eine Medienabfrage die Variablen, die zum Einrichten eines sehr einfachen Gitters verwendet werden:

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

:root{
    --width: 25%;
    --content: 'This is desktop';
}
@media only screen and (max-width: 767px){
    :root{
        --width:50%;
        --content: 'This is mobile';
    }
}
@media only screen and (max-width: 480px){
    :root{
        --width:100%;
    }
}

div{
    width: calc(var(--width) - 20px);
    height: 100px;
}
div:before{
    content: var(--content);
}

/* Other Styles */
body {
    padding: 10px;
}

div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight:bold;
    float:left;
    margin: 10px;
    border: 4px solid black;
    background: red;
}

Sie können versuchen, die Größe des Fensters in dieser CodePen-Demo zu ändern

Hier ist ein animierter Screenshot der Größenänderung in Aktion: