Heim Web-Frontend CSS-Tutorial CSS-Variablenbeschreibung und Tutorial

CSS-Variablenbeschreibung und Tutorial

Nov 17, 2017 pm 05:31 PM
css 教程

CSS ist eine unverzichtbare Sprache für unsere Front-End-Entwicklung. Wenn wir sie gut verwenden können, gibt es in CSS immer keine Variablen. Sie können nur Precompiler wie SASS verwenden oder WENIGER. Im März dieses Jahres kündigte Microsoft an, dass der Edge-Browser CSS-Variablen unterstützen würde. Diese wichtige neue CSS-Funktion wird bereits von allen gängigen Browsern unterstützt. Dieser Artikel bietet eine umfassende Einführung in die Verwendung und Sie werden feststellen, dass natives CSS äußerst leistungsstark ist. In diesem Artikel lernen Sie einige Verwendungsmöglichkeiten von CSS-Variablen kennen.

1. Deklaration von Variablen

Fügen Sie beim Deklarieren einer Variablen zwei Bindestriche (--) vor dem Variablennamen hinzu.

body {
  --foo: #7F583F;
  --bar: #F7EFD2;}
Nach dem Login kopieren

Im obigen Code werden zwei Variablen im Body-Selektor deklariert: --foo und --bar.

Sie unterscheiden sich nicht von formalen Eigenschaften wie Farbe und Schriftgröße, haben aber keine Standardbedeutung. Daher werden CSS-Variablen auch „CSS-benutzerdefinierte Eigenschaften“ genannt. Denn Variablen und benutzerdefinierte CSS-Eigenschaften sind eigentlich dasselbe.

Sie fragen sich vielleicht, warum zwei Konjunktionslinien (--) zur Darstellung von Variablen ausgewählt werden? Weil $foo von Sass und @foo von Less verwendet wird. Um Konflikte zu vermeiden, verwenden die offiziellen CSS-Variablen stattdessen zwei Konjunktionslinien.

In CSS-Variablen können verschiedene Werte eingegeben werden.

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;
  --header-height: 68px;
  --content-padding: 10px 20px;
  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);}
Nach dem Login kopieren

Variablennamen unterscheiden zwischen Groß- und Kleinschreibung. --header-color und --Header-Color sind zwei verschiedene Variablen.

2. var()-Funktion

Die var()-Funktion wird zum Lesen von Variablen verwendet.

a {
  color: var(--foo);
  text-decoration-color: var(--bar);}
Nach dem Login kopieren

Die Funktion var() kann auch einen zweiten Parameter verwenden, um den Standardwert der Variablen darzustellen. Wenn die Variable nicht vorhanden ist, wird dieser Standardwert verwendet.

color: var(--foo, #7F583F);
Nach dem Login kopieren

Der zweite Parameter verarbeitet keine internen Kommas oder Leerzeichen und wird als Teil des Parameters betrachtet.

var(--font-stack, "Roboto", "Helvetica");var(--pad, 10px 15px 20px);
var()函数还可以用在变量的声明。
:root {  --primary-color: red;  --logo-text: var(--primary-color);}
Nach dem Login kopieren

Beachten Sie, dass Variablenwerte nur als Attributwerte und nicht als Attributnamen verwendet werden können.

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;}
Nach dem Login kopieren

Im obigen Code wird die Variable --side als Attributname verwendet, was ungültig ist.

3. Typ des Variablenwerts

Wenn der Variablenwert eine Zeichenfolge ist, kann er mit anderen Zeichenfolgen verkettet werden.

--bar: 'hello';--foo: var(--bar)' world';
Nach dem Login kopieren

Damit können Sie debuggen (Beispiel).

body:after {
  content: '--screen-category : 'var(--screen-category);}
Nach dem Login kopieren

Wenn der Variablenwert ein numerischer Wert ist, kann er nicht direkt mit der numerischen Einheit verwendet werden.

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;}
Nach dem Login kopieren

Im obigen Code werden Wert und Einheit direkt zusammen geschrieben, was ungültig ist. Sie müssen die Funktion calc() verwenden, um sie zu verbinden.

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);}
Nach dem Login kopieren

Wenn der Variablenwert eine Einheit hat, kann er nicht als String geschrieben werden.

/* 无效 */.foo {  --foo: '20px';  font-size: var(--foo);}
/* 有效 */.foo {  --foo: 20px;  font-size: var(--foo);}
Nach dem Login kopieren

4. Geltungsbereich

Die gleiche CSS-Variable kann in mehreren Selektoren deklariert werden. Beim Lesen wird die Anweisung mit der höchsten Priorität wirksam. Dies steht im Einklang mit der CSS-„Kaskaden“-Regel.

Hier ist ein Beispiel.

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }</style><p>蓝色</p><div>绿色</div><div id="alert">红色</div>
Nach dem Login kopieren

Im obigen Code deklarieren alle drei Selektoren die Variable --color. Wenn verschiedene Elemente diese Variable lesen, wird die Regel mit der höchsten Priorität verwendet, sodass die Farben der drei Textabsätze unterschiedlich sind.

Das heißt, der Gültigkeitsbereich einer Variablen ist der gültige Gültigkeitsbereich des Selektors, in dem sie sich befindet.

body {
  --foo: #7F583F;}.content {
  --bar: #F7EFD2;}
Nach dem Login kopieren

Im obigen Code ist der Bereich der Variablen --foo der effektive Bereich des Body-Selektors und der Bereich von --bar der effektive Bereich des .content-Selektors.

Aus diesem Grund werden globale Variablen normalerweise innerhalb des Wurzelelements:root platziert, um sicherzustellen, dass jeder Selektor sie lesen kann.

:root {
  --main-color: #06c;}
Nach dem Login kopieren

5. Responsives Layout

CSS ist dynamisch und alle Änderungen an der Seite führen zu Änderungen der übernommenen Regeln.

Mit dieser Funktion können Sie Variablen im Medienbefehl des responsiven Layouts deklarieren, sodass unterschiedliche Bildschirmbreiten unterschiedliche Variablenwerte haben.

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;}a {
  color: var(--primary);
  text-decoration-color: var(--secondary);}@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }}
Nach dem Login kopieren

6. Kompatibilitätsverarbeitung

Für Browser, die keine CSS-Variablen unterstützen, können Sie die folgende Schreibmethode verwenden.

a {
  color: #7F583F;
  color: var(--primary);}
Nach dem Login kopieren

Sie können zur Erkennung auch den Befehl @support verwenden.

@supports ( (--a: 0)) {
  /* supported */}@supports ( not (--a: 0)) {
  /* not supported */}
Nach dem Login kopieren

7. JavaScript-Betrieb

JavaScript kann auch erkennen, ob der Browser CSS-Variablen unterstützt.

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);if (isSupported) {
  /* supported */} else {
  /* not supported */}
Nach dem Login kopieren

JavaScript verarbeitet CSS-Variablen wie folgt.

// 设置变量document.body.style.setProperty('--primary', '#7F583F');// 读取变量document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'// 删除变量document.body.style.removeProperty('--primary');
Nach dem Login kopieren

Das bedeutet, dass JavaScript beliebige Werte in Stylesheets speichern kann. Das Folgende ist ein Beispiel für das Abhören eines Ereignisses. Die Ereignisinformationen werden in einer CSS-Variablen gespeichert.

const docStyle = document.documentElement.style;document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);});
Nach dem Login kopieren

Informationen, die für CSS nicht nützlich sind, können auch in CSS-Variablen abgelegt werden.

--foo: if(x > 5) this.width = 10;
Nach dem Login kopieren

Im obigen Code ist der Wert von --foo eine ungültige Anweisung in CSS, kann aber von JavaScript gelesen werden. Das bedeutet, dass Sie Stileinstellungen in CSS-Variablen schreiben und diese von JavaScript lesen lassen können.

CSS-Variablen bieten also eine Möglichkeit für JavaScript, mit CSS zu kommunizieren.

Ich glaube, Sie haben viel über CSS-Variablen gelernt. Ich hoffe, dieses Tutorial kann Ihnen bei der Arbeit helfen.

Verwandte Tutorials:

Neues Wissen: CSS-Variable-Variable

Die erste CSS-Variable: currentColor_html/css_WEB-ITnose

CSS-Variable „trial_html/css_WEB-ITnose“

Das obige ist der detaillierte Inhalt vonCSS-Variablenbeschreibung und Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was bedeutet Platzhalter in Vue? Was bedeutet Platzhalter in Vue? May 07, 2024 am 09:57 AM

Was bedeutet Platzhalter in Vue?

Im Sommer müssen Sie unbedingt versuchen, einen Regenbogen zu schießen Im Sommer müssen Sie unbedingt versuchen, einen Regenbogen zu schießen Jul 21, 2024 pm 05:16 PM

Im Sommer müssen Sie unbedingt versuchen, einen Regenbogen zu schießen

Was bedeutet span in js Was bedeutet span in js May 06, 2024 am 11:42 AM

Was bedeutet span in js

Was bedeutet rem in js Was bedeutet rem in js May 06, 2024 am 11:30 AM

Was bedeutet rem in js

So führen Sie Bilder in Vue ein So führen Sie Bilder in Vue ein May 02, 2024 pm 10:48 PM

So führen Sie Bilder in Vue ein

In welcher Sprache ist das Browser-Plugin geschrieben? In welcher Sprache ist das Browser-Plugin geschrieben? May 08, 2024 pm 09:36 PM

In welcher Sprache ist das Browser-Plugin geschrieben?

Was ist ein Knoten in js? Was ist ein Knoten in js? May 07, 2024 pm 09:06 PM

Was ist ein Knoten in js?

Wie kann ich die falsche Kette virtueller Währungen abrufen? Tutorial zum Abrufen der falschen Kette einer virtuellen Währungsübertragung Wie kann ich die falsche Kette virtueller Währungen abrufen? Tutorial zum Abrufen der falschen Kette einer virtuellen Währungsübertragung Jul 16, 2024 pm 09:02 PM

Wie kann ich die falsche Kette virtueller Währungen abrufen? Tutorial zum Abrufen der falschen Kette einer virtuellen Währungsübertragung

See all articles