CSS proměnné – funkce var().

Obsah

    Zobrazit obsah

CSS proměnné

Funkce var() se používá k vložení hodnoty a CSS proměnná.

Proměnné CSS mají přístup k DOM, což znamená, že můžete vytvářet proměnné s místním nebo globálním rozsahem, změnit proměnné pomocí JavaScriptu a měnit proměnné na základě dotazů na média.

Dobrý způsob, jak použít proměnné CSS, je, pokud jde o barvy vašich design. Místo kopírování a vkládání stejných barev znovu a znovu můžete umístěte je do proměnných.

Tradiční způsob

Následující příklad ukazuje tradiční způsob definování některých barev v šabloně stylů (definováním barev, které se mají použít pro každý konkrétní prvek):

Příklad

 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;
}

Zkuste to sami →

<!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>

Syntaxe funkce var()

Funkce var() se používá k vložení hodnoty a CSS proměnná.

Syntaxe funkce var() je následující:

 var(--name, value)
name

Požadované. Název proměnné (musí začínat dvěma čárky)

value

Volitelný. Záložní hodnota (používá se, pokud proměnná není nalezena)

Poznámka: Název proměnné musí začínat dvěma pomlčkami (--) a rozlišují se malá a velká písmena!

Jak funguje var()

Za prvé: CSS proměnné mohou mít globální nebo lokální rozsah.

Ke globálním proměnným lze přistupovat/používat je v celém dokumentu lokální proměnné lze použít pouze uvnitř selektoru, kde jsou deklarovány.

Chcete-li vytvořit proměnnou s globálním rozsahem, deklarujte ji uvnitř :root volič. Selektor :root odpovídá kořenovému prvku dokumentu.

Chcete-li vytvořit proměnnou s místním rozsahem, deklarujte ji uvnitř selektoru, který ji bude používat.

Následující příklad je stejný jako příklad výše, ale zde používáme funkci var().

Nejprve deklarujeme dvě globální proměnné (--blue a --white). Poté použijeme Funkce var() pro vložení hodnoty proměnných později do šablony stylů:

Příklad

 :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;
}

Zkuste to sami →

<!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>

Výhody použití var() jsou:

  • usnadňuje čtení kódu (srozumitelnější)

  • výrazně usnadňuje změnu hodnot barev

Chcete-li změnit modrou a bílou barvu na jemnější modrou a bílou, stačí pro změnu dvou hodnot proměnných:

Příklad

 :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;
}

Zkuste to sami →

<!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>

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která plně podporuje funkce var().

Function
var() 49.0 15.0 31.0 9.1 36.0

CSS funkce var()

var()

Vloží hodnotu proměnné CSS