So definieren und verwenden Sie Variablen in CSS

Die native Variablendefinitionssyntax in CSS ist „--*“ und die Variablenverwendungssyntax ist „var(--*)“, wobei * den Variablennamen darstellt. CSS-Variablen dürfen keine Zeichen wie „$“, „[“, „^“, „(“, „%“ usw. enthalten. Gewöhnliche Zeichen müssen nur „Zahlen“, „Buchstaben“, „Unterstriche“ und „Bindestriche“ sein. .

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, Dell G3-Computer

Die native Variablendefinitionssyntax in CSS lautet: --* und die Variablenverwendungssyntax lautet: var(- -*); wobei * den Namen der Variable bedeutet; Im Dokument ist dies ein guter Ort, um benutzerdefinierte Attribute einzufügen, da wir benutzerdefinierte Attribute basierend auf der Selektivität anderer individueller Sonderstile überschreiben können

3, Verwendung: in der .vue-Datei. Stilistisch verwendet:

background:var(--baseBackground);

Weitere Einführung:

css中定义变量

定义变量可分多种情况：
1、定义全局变量
:root {
  --borderColor: #ccc;
}
使用：width:var(--borderColor);

2、定义某元素下的变量
.look{
  --borderColor: #ccc;
}

3、定义媒体查询下的变量
@media screen and (min-width: 1025px) { 
    :root { 
        --borderColor: #ccc;
　　 }
}
使用：
.has-border-table > tr > td {
  border-right: 1px solid var(--borderColor);
}

less中定义变量
定义：
@bg-color : #d9d9d9;
使用：
.has-border-table > tr > td {
  border-right: 1px solid var(@bg-color);
}

sass中定义变量
定义：
$bg-color : #d9d9d9;
使用：
.has-border-table > tr > td {
  border-right: 1px solid var($bg-color);
}

Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo definieren und verwenden Sie Variablen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!