Heim > Artikel > Web-Frontend > Erster Kontakt mit CSS-Variablen
Erster Kontakt mit CSS-Variablen
- 青灯夜游Original
- 2018-09-11 17:32:152155Durchsuche
Ich glaube, dass jeder, der gerade mit CSS-Variablen in Berührung gekommen ist, viele Fragen zu CSS-Variablen haben muss, also lassen Sie uns für Sie über CSS-Variablen sprechen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
So definieren und verwenden Sie CSS-Variablen
Beginnen Sie mit der Sprache, mit der wir am besten vertraut sind, JavaScript: Variablen in JavaScript definieren verwendet Vars.
Um eine einfache JavaScript-Variable zu deklarieren, sehen Sie folgendermaßen aus:
var mainColor = 'red';
Um eine CSS-Variable zu deklarieren, müssen Sie vor dem Namen der Variable einen doppelten Bindestrich hinzufügen. Zum Beispiel:
body{
--color:red;
}Um nun den Wert einer CSS-Variablen zu verwenden, können wir die Funktion var(...) verwenden. Wie folgt:
.demo{
background:var(--color);
}Der einfachste Weg, CSS-Variablen zu verwalten, besteht darin, sie als Root-Pseudoklasse zu deklarieren. Da CSS-Variablen wie jede andere CSS-Definition Regeln folgen, stellt die Platzierung in :root sicher, dass alle Selektoren Zugriff auf diese Variablen haben.
:root{ --color:red;
}
.demo{
background:var(--color);
}
p{
color:var(--color);
}Unterstützt der Browser CSS-Variablen?
Die Browserunterstützung für CSS-Variablen ist ziemlich gut. Es ist nur so, dass der IE-Browser es nicht unterstützt. Wenn Sie die Browserkompatibilität überprüfen möchten, klicken Sie hier und Sie werden sehen, dass alle gängigen Browser CSS-Variablen standardmäßig unterstützen. Sei es mobil oder Desktop.
Eine praktische Anwendung von CSS-Variablen
Beispiel 1 – Farben verwalten
Bisher Einer der besten Kandidaten für die Verwendung von CSS-Variablen ist die Verwaltung der Farben einer Webseite. Anstatt dieselben Farben immer wieder zu kopieren und einzufügen, können wir sie in Variablen einfügen. Wenn uns jemand gebeten hat, einen bestimmten Grünton zu aktualisieren oder alle Schaltflächen rot statt blau zu machen, ändern Sie einfach den Wert dieser CSS-Variablen und fertig. Sie müssen nicht alle Instanzen dieser Farbe suchen und ersetzen.
Aufgeführt als:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理颜色</title>
<style type="text/css">
/*css_vars.css*/
:root {
--primary-color: #ed6564;
--accent-color: #388287;
}
html {
background-color: var(--primary-color);
}
h3 {
border-bottom: 2px solid var(--primary-color);
}
button {
color: var(--accent-color);
border: 1px solid var(--accent-color);
}
p {
color: var(--accent-color);
}
/*base.css*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
padding: 30px;
font: normal 13px/1.5 sans-serif;
color: #546567;
background-color: var(--primary-color);
}
.container {
background: #fff;
padding: 20px;
}
h3 {
padding-bottom: 10px;
margin-bottom: 15px;
}
p {
background-color: #fff;
margin: 15px 0;
}
button {
margin:0 5px;
font-size: 13px;
padding: 8px 12px;
background-color: #fff;
border-radius: 3px;
box-shadow: none;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
opacity: 0.8;
outline: 0;
}
button:hover {
opacity: 1;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h3>管理颜色</h3>
<p>管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色</p>
<div class="center">
<button>查看详情</button><button>取消</button>
</div>
</div>
</body>
</html>Rendering:
Beispiel 2 – Doppelten Code löschen
Oft möchten Sie mehrere verschiedene Variationen einer Komponente erstellen. Gleicher Grundstil, etwas anders. Lassen Sie uns einige Schaltflächen mit unterschiedlichen Farben verwenden. Die typische Lösung besteht darin, eine Basisklasse wie .btn zu erstellen und Variantenklassen hinzuzufügen.
.btn { border: 2px solid black;}
.btn:hover {background: black;}
.btn.red {border-color: red}
.btn.red:hover {background: red}Verwenden Sie sie jetzt wie folgt:
<button class="btn">Hello</button> <button class="btn red">Hello</button>
Dies führt jedoch zu einer gewissen Codeduplizierung. Bei der .red-Variante müssen wir die Rahmenfarbe und den Hintergrund auf Rot setzen.
Diese Situation kann mithilfe von CSS-Variablen leicht behoben werden. Wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除重复的代码</title>
<style type="text/css">
.btn{
border-radius:4px;
text-align:center;
padding:.5em;
margin-bottom:0.5em;
background:#fff;
border:1px solid var(--color, black);
}
.btn:hover{
color:#fff;
cursor:pointer;
background:var(--color, black);
}
.btn.red{
--color:red;
}
.btn.green{
--color:green;
}
.btn.blue{
--color:blue;
}
</style>
</head>
<body>
<div class="btn">HMOE</div>
<div class="btn red">HMOE</div>
<div class="btn green">HMOE</div>
<div class="btn blue">HMOE</div>
</body>
</html>Rendering:
Beispiel 3 – Einige Attribute lesbar machen
Wenn wir wollen Um Verknüpfungen zu komplexeren Eigenschaftswerten zu erstellen, sind CSS-Variablen großartig zu verwenden, sodass wir sie uns nicht merken müssen. CSS-Eigenschaften wie Box-Shadow, Transform und Font oder andere CSS-Regeln, die mehrere Parameter benötigen, sind perfekte Beispiele. Wir können die Eigenschaft in eine Variable einfügen, damit wir sie in einem besser lesbaren Format wiederverwenden können.
Zum Beispiel:
:root {
--tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
--animate-right: translateX(20px);
}
li {
box-shadow: var(--tiny-shadow);
}
li:hover {
transform: var(--animate-right);
}Beispiel 4 – Kaskadierende Variablen
Standardkaskadierungsregeln gelten auch für CSS-Variablen. Wenn also eine benutzerdefinierte Eigenschaft mehrmals deklariert wird, überschreibt die niedrigste Definition in der CSS-Datei die darüber liegenden Definitionen. Das folgende Beispiel zeigt, wie einfach es ist, Eigenschaften von Benutzeraktionen dynamisch zu manipulieren und dabei den Code dennoch klar und prägnant zu halten.
CSS_var.css-Datei:
.orange-container {
--main-text: 18px;
}
.orange-container:hover {
--main-text: 22px;
}
.red-container:hover {
--main-text: 26px;
}
.title {
font-size: var(--title-text);
}
.content {
font-size: var(--main-text);
}.container:hover {
--main-text: 18px;
}base.css-Datei:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}html {
background: #eee;
padding: 30px;
font: 500 14px sans-serif;
color: #333;
line-height: 1.5;
}.orange-container {
background: orange;
}.red-container {
background: red;
}.red-container,
.orange-container {
padding-top: 10px;
padding-left: 50px;
}.container {
background: blue;
padding: 20px;
color: white;
}p {
transition: 0.4s;
}.title {
font-weight: bold;
}index.html-Datei:
<html>
<head>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="css_vars.css">
</head>
<body>
<div class="orange-container">
Hover orange to make blue bigger.
<div class="red-container">
Hover red to make blue even bigger.
<div class="container">
<p class="content">Hover on the different color areas to change the size of this text and the title.</p>
</div>
</div>
</div>
</body>
</html>Rendering:
Beispiel 5 – Theme-Umschalter mit CSS-Variablen
Ein Vorteil von CSS-Variablen ist ihre Reaktivität. Sobald wir es aktualisieren, werden auch alle Eigenschaften mit CSS-Variablenwerten aktualisiert. Mit nur wenigen Zeilen Javascript und der intelligenten Verwendung von CSS-Variablen können wir einen Theme-Switcher-Mechanismus erstellen.
Zum Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>具有CSS变量的主题切换器</title>
<style>
body {
background-color: var(--bg, #b3e5fc);
color: var(--bg-text, #37474f);
font-family: sans-serif;
line-height: 1.3;
}
.toolbar {
text-align: center;
}
</style>
</head>
<body>
<div class="toolbar">
<button value="dark">dark</button>
<button value="calm">calm</button>
<button value="light">light</button>
</div>
<h2>Stackoverflow Question</h2>
<p>I would like to use an external javascript file in another javascript file. For example, I could store all my global variables
in a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag.
How do I use the globals.js inside the logic.js?
</p>
<script>
var root = document.documentElement;
var themeBtns = document.querySelectorAll(".toolbar > button");
themeBtns.forEach(function (btn){
btn.addEventListener("click", handleThemeUpdate);
});
function handleThemeUpdate(e) {
switch (e.target.value) {
case "dark":
root.style.setProperty("--bg", "black");
root.style.setProperty("--bg-text", "white");
break;
case "calm":
root.style.setProperty("--bg", "#B3E5FC");
root.style.setProperty("--bg-text", "#37474F");
break;
case "light":
root.style.setProperty("--bg", "white");
root.style.setProperty("--bg-text", "black");
break;
}
}
</script>
</body>
</html>Rendering 1 – einfach ausführen:
Rendering 2 – auf Dunkel klicken:
Rendering 3 – Klicken Sie auf Ruhe:
Rendering 4 – Klicken Sie auf Licht:
CSS变量的使用提示
像CSS中几乎所有的东西一样，变量也非常简单易用。以下是一些未包含在示例中的提示，但在某些情况下仍然非常有用：
1）css变量区分大小写。下面的示例是两个不同的变量：
:root {
--color: blue;
--COLOR: red;
}2）当您使用var（）函数时，您可以使用第二个参数。如果找不到自定义属性，将使用第二个参数为默认值：
width: var(--custom-width, 50%);
3）可以直接将CSS变量用于HTML：
<!--HTML--><html style="--size: 600px"><!--CSS-->body {
max-width: var(--size)
}4) 可以在其他CSS var中使用CSS变量：
--base-red-color: #f00; --background-gradient: linear-gradient(to top, var(--base-red-color), #222);
5) 可以使用媒体查询使CSS变量成为条件。例如，以下代码根据屏幕大小更改填充的值：
:root {
--padding: 15px
}@media screen and (min-width: 750px) {
--padding: 30px}6) 不要害怕在 clac() 函数中使用CSS变量。
--text-input-width: 5000px; max-width: calc(var(--text-input-width) / 2);
当然，CSS变量不是灵丹妙药。不会解决你在CSS领域遇到的每一个问题。但是，使用它使您的代码更具可读性和可维护性。此外，它极大地改善了大型文档的易变性。只需将所有常量设置在一个单独的文件中，当您只想对变量进行更改时，就不必跳过数千行代码。
Das obige ist der detaillierte Inhalt vonErster Kontakt mit CSS-Variablen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!