Zmienne

Zmienne w CSS, oficjalnie znane jako własności niestandardowe, to potężne narzędzie, które umożliwia deweloperom przechowywanie określonych wartości, które można wielokrotnie wykorzystywać w całym arkuszu stylów. Dzięki temu podejściu można łatwiej zarządzać schematem kolorów, rozmiarami fontów i innymi wartościami, które mogą się powtarzać na stronie internetowej. Zmienne w CSS są szczególnie przydatne w dużych projektach, gdzie konsekwencja i łatwość utrzymania kodu są kluczowe.

Przykład użycia zmiennych CSS

Poniższy przykład demonstruje, jak zdefiniować i użyć zmiennych w CSS. Przykład obejmuje definicję zmiennych dla kolorów, rozmiaru fontu i marginesów, a następnie wykorzystanie tych zmiennych w klasach CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład zmiennych CSS</title>
    <style>
        /* Definicja zmiennych globalnych */
        :root {
            --main-bg-color: lightblue; /* Główny kolor tła */
            --main-text-color: navy; /* Główny kolor tekstu */
            --font-size: 16px; /* Rozmiar fontu */
            --padding: 10px; /* Padding */
        }

        /* Użycie zmiennych */
        .container {
            background-color: var(--main-bg-color); /* Użycie zmiennej dla koloru tła */
            color: var(--main-text-color); /* Użycie zmiennej dla koloru tekstu */
            font-size: var(--font-size); /* Użycie zmiennej dla rozmiaru fontu */
            padding: var(--padding); /* Użycie zmiennej dla paddingu */
            border: 1px solid var(--main-text-color); /* Użycie zmiennej dla koloru obramowania */
        }
    </style>
</head>
<body>
    <div class="container">
        Tekst w kontenerze z zastosowaniem zmiennych CSS.
    </div>
</body>
</html>

W tym przykładzie, zmienne są definiowane w selektorze :root, co sprawia, że są one dostępne globalnie na całej stronie. Dzięki zastosowaniu funkcji var(--nazwa-zmiennej), możemy odwoływać się do wartości zmiennych w różnych miejscach CSS, co zwiększa spójność i ułatwia zarządzanie stylami.

Możliwe wartości i ich zastosowanie

Zmienne CSS mogą przechowywać różne typy wartości, takie jak:

  • Kolory: np. #ffffff, rgba(255,255,255,0.5), var(--main-color)
  • Rozmiary: w jednostkach px, em, rem, %, vh, vw itp., np. 16px, 1em, 10%, 100vh
  • Czcionki: nazwy rodzin czcionek lub konkretne style, np. sans-serif, var(--font-family)
  • Inne: np. wartości dla border-style jak solid, dashed, dotted

Podsumowanie

Zmienne CSS3 znacząco poprawiają elastyczność i łatwość zarządzania stylami na stronach internetowych. Pozwalają na centralne zarządzanie wartościami, które są często używane w różnych częściach projektu, co ułatwia wprowadzanie zmian i utrzymanie spójności. Dzięki zmiennym, deweloperzy mogą skuteczniej organizować i utrzymywać swoje arkusze stylów, co czyni prace nad projektami bardziej efektywnymi i przyjemnymi.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top