CodeGym/Kursy/Frontend SELF PL/Użycie zmiennych CSS

Użycie zmiennych CSS

Dostępny

2.1 Deklaracja zmiennych CSS

Zmienne CSS, znane również jako właściwości niestandardowe (Custom Properties), pozwalają na definiowanie wartości, które można wykorzystać ponownie w różnych częściach kodu CSS. Znacząco upraszczają zarządzanie stylami i zwiększają ich elastyczność.

Zmienne CSS są deklarowane za pomocą podwójnego myślnika (--) i mogą być zdefiniowane w dowolnym selektorze. Jednak aby zapewnić dostępność zmiennych w całym dokumencie, często są one definiowane w selektorze korzenia :root.

Składnia:

selektor {
  --nazwa-zmiennej: wartość;
}

Przykład:

W tym przykładzie zadeklarowano cztery zmienne: --main-bg-color, --main-text-color, --primary-color, i --font-size.

CSS
:root {
  --main-bg-color: #f0f0f0;
  --main-text-color: #333;
  --primary-color: #3498db;
  --font-size: 16px;
}

Użycie zmiennych CSS

Aby wykorzystać wartość zmiennej, używa się funkcji var(), która przyjmuje nazwę zmiennej jako argument.

Składnia:

selektor {
  właściwość: var(--nazwa-zmiennej);
}

Przykład:

W tym przykładzie wartości zmiennych są używane do ustawienia koloru tła, koloru tekstu, rozmiaru czcionki i koloru linków.

CSS
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: var(--font-size);
}

a {
  color: var(--primary-color);
}

2.2 Przykłady użycia zmiennych CSS

Przykład 1: Podstawowe użycie zmiennych

CSS
:root {
  --main-bg-color: #f0f0f0;
  --main-text-color: #333;
  --primary-color: #3498db;
  --font-size: 16px;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: var(--font-size);
}

a {
  color: var(--primary-color);
}
HTML
<body>
  <p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>

Wynik:

  • Tło strony będzie jasnoszare
  • Tekst będzie ciemnoszary
  • Rozmiar czcionki wyniesie 16 pikseli
  • Linki będą miały niebieski kolor

Przykład 2: Nadpisanie zmiennych w poszczególnych komponentach

Zmienne CSS mogą być nadpisywane dla poszczególnych elementów lub komponentów, zapewniając elastyczność w stylizacji:

CSS
:root {
  --main-bg-color: #f0f0f0;
  --main-text-color: #333;
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: var(--main-bg-color);
}

.footer {
  --primary-color: #e74c3c; /* Nadpisanie zmiennej */
  background-color: var(--primary-color);
  color: var(--main-bg-color);
}
HTML
<div class="header">
  <p>This is the header.</p>
</div>

<div class="footer">
  <p>This is the footer.</p>
</div>

Wynik:

  • Tło nagłówka będzie niebieskie, a tekst — jasnoszary
  • Tło stopki będzie czerwone (nadpisana zmienna), a tekst — jasnoszary

Przykład 3: Użycie zmiennych w kombinacji z innymi wartościami

Zmienne CSS można łączyć z innymi wartościami i funkcjami CSS:

CSS
:root {
  --padding: 10px;
  --margin: 20px;
}

.container {
  padding: var(--padding);
  margin: var(--margin) auto;
  border: 1px solid black;
}
HTML
<div class="container">
  <p>This is a container with padding and margin.</p>
</div>

Wynik:

  • Kontener będzie mieć odstępy i zewnętrzne odstępy określone zmiennymi

2.3 Użycie zmiennych CSS w JavaScript

Przykład użycia zmiennych CSS w JavaScript

Zmienne CSS można dynamicznie zmieniać za pomocą JavaScript, co pozwala na dostosowanie stylów w czasie rzeczywistym:

CSS
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
HTML
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</p>
JavaScript
document.getElementById('toggle-theme').addEventListener('click', () => {

  const root = document.documentElement;

  if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
    root.style.setProperty('--bg-color', '#333333');
    root.style.setProperty('--text-color', '#ffffff');
  } else {
    root.style.setProperty('--bg-color', '#ffffff');
    root.style.setProperty('--text-color', '#000000');
  }
});

Wyjaśnienie:

Po kliknięciu przycisku zmieniają się wartości zmiennych --bg-color i --text-color, co prowadzi do zmiany koloru tła i tekstu na stronie.

1
Zadanie
Frontend SELF PL,  poziom 31lekcja 1
Niedostępne
Podstawowe zmienne CSS
Podstawowe zmienne CSS
1
Zadanie
Frontend SELF PL,  poziom 31lekcja 1
Niedostępne
CSS-zmienne i inne wartości
CSS-zmienne i inne wartości
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy