CSS-változók – A var() függvény

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

CSS-változók

A var() függvény az a érték beszúrására szolgál CSS változó.

A CSS-változók hozzáférhetnek a DOM-hoz, ami azt jelenti, hogy létrehozhat helyi vagy globális hatókörű változókat, módosítsa a változókat JavaScript segítségével, és módosítsa a változókat a médialekérdezések alapján.

A CSS-változók használatának jó módja az, amikor az Ön színéről van szó tervezés. Ahelyett, hogy ugyanazokat a színeket másolná és illesztené be újra és újra, megteheti változókba helyezzük őket.

A hagyományos módszer

A következő példa néhány szín meghatározásának hagyományos módját mutatja be egy stíluslapon (az egyes elemekhez használandó színek meghatározásával):

Példa

 body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: 
  #1e90ff;
  
  background-color: #ffffff;
  padding: 15px;
}
button {
  
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px 
  solid #1e90ff;
  padding: 5px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #1e90ff;
}

h2 {
  border-bottom: 2px solid #1e90ff;
}

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}
</style>
</head>
<body>

<h1>The Traditional Way</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

A var() függvény szintaxisa

A var() függvény az a érték beszúrására szolgál CSS változó.

A var() függvény szintaxisa a következő:

 var(--name, value)
name

Kívánt. A változó neve (kettővel kell kezdődnie kötőjelek)

value

Választható. A tartalék érték (ha a változó nem található)

Megjegyzés: A változó nevének két kötőjellel (--) kell kezdődnie, és megkülönbözteti a kis- és nagybetűket!

Hogyan működik a var()

Először is: A CSS-változóknak lehet globális vagy lokális hatóköre.

A globális változók a teljes dokumentumon keresztül elérhetők/használhatók, míg a lokális változók csak a szelektoron belül használhatók, ahol deklarálva van.

Globális hatókörű változó létrehozásához deklarálja azt a :root kódban. választó. A :root választó megegyezik a dokumentum gyökérelemével.

Lokális hatókörű változó létrehozásához deklarálja azt a használni kívánt választóban.

A következő példa megegyezik a fenti példával, de itt a var() függvényt használjuk.

Először is deklarálunk két globális változót (--kék és --fehér). Ezután használjuk a var() függvény a változók értékének későbbi beszúrásához a stíluslapba:

Példa

 :root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

  body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
  
.container {
  
  color: var(--blue);
  background-color: var(--white);
  padding: 
  15px;
}
button {
  background-color: var(--white);
  
  color: var(--blue);
  border: 1px solid var(--blue);
  
  padding: 5px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

A var() használatának előnyei:

  • könnyebben olvashatóvá teszi a kódot (érthetőbb)

  • sokkal könnyebbé teszi a színértékek megváltoztatását

Ahhoz, hogy a kék-fehér színt lágyabb kék-fehérre cserélje, csak szüksége van rá a két változó értékének megváltoztatásához:

Példa

 :root {
  --blue: #6495ed;
  --white: #faf0e6; 
}

  body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
  
.container {
  
  color: var(--blue);
  background-color: var(--white);
  padding: 
  15px;
}
button {
  background-color: var(--white);
  
  color: var(--blue);
  border: 1px solid var(--blue);
  
  padding: 5px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #6495ed;
  --white: #faf0e6; 
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Böngésző támogatás

A táblázatban szereplő számok az első böngészőverziót jelzik, amely teljes mértékben támogatja a var() függvény.

Function
var() 49.0 15.0 31.0 9.1 36.0

CSS var() függvény

var()

Egy CSS-változó értékét szúrja be