Zmienne CSS w czystym CSS – pierwsze kroki w 5 minut lub mniej

Zmienne CSS (lub oficjalnie: właściwości niestandardowe ) w czystym CSS to ogromna oszczędność czasu dla każdego, kto chce zainwestować pięć minut w naukę ich używania. Istnieją od CSS3, a 92% wszystkich użytkowników ma przeglądarki, które je obsługują. Korzystanie ze zmiennych CSS nie wymaga żadnych znaczących zmian w istniejących arkuszach stylów ani nowych narzędzi i można je łatwo zastosować w starych projektach. Zamiast mieć kod koloru szesnastkowego zapisany w setkach miejsc w pliku, możesz go zdefiniować tylko w jednym miejscu – za pomocą zmiennej CSS. Ogromna oszczędność czasu i pomoc w tworzeniu bardziej spójnych arkuszy stylów.

Zaczekaj, więc to jest Saas or Less, prawda?

Nie, mówimy tutaj o czystym CSS, a nie CSS połączonym z preprocesorem takim jak Saas, Less czy SCSS. Korzystanie ze zmiennych CSS nie wymaga żadnych dodatkowych narzędzi, edytorów ani zmian w przepływie pracy ani niczego innego, z czego korzystasz. Dlatego istniejące pliki CSS bez zmiennych nie wymagają żadnych „specjalnych” zmian i można je mieszać i dopasowywać – używaj zmiennych tylko dla części pliku lub tylko w niektórych plikach jest twój projekt.

Preprocesory CSS, takie jak Saas lub Less, również obsługują zmienne. Ponadto mają o wiele więcej funkcji i opcji, z których możesz skorzystać. Jednak, jak sama nazwa wskazuje, wymagają preprocesora – narzędzia, które zamienia CSS napisany w Saas na czysty CSS. Jeśli potrzebujesz tylko zmiennych – czysty CSS ma wszystko, czego potrzebujesz.

Zmienne CSS są funkcją natywną i dlatego są świetne. Przy minimalnym wysiłku Twoje arkusze stylów są znacznie bardziej czytelne i spójne. Co więcej, wszelkie zmiany, które musisz wykonać później, są znacznie łatwiejsze do wykonania – na pewno szybsze niż wyszukiwanie i zastępowanie, gdy musisz zmienić kod koloru w setkach miejsc .

Stwórzmy kilka zmiennych

Jak w każdym języku programowania, są dwa kroki do używania zmiennych : nadanie im wartości (zdefiniowanie) i użycie ich (umieszczenie ich we wszystkich miejscach, w których potrzebujesz tej wartości). Zrobimy to samo;

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

Jeśli chcesz używać zmiennej globalnie (w dowolnym miejscu) w pliku CSS, musisz zdefiniować ją w pseudoklasie :root . Lokalizacja w pliku nie ma znaczenia. Może znajdować się na początku lub na końcu pliku. Ale musisz umieścić zmienną w :root . Nazwa musi zaczynać się od podwójnego myślnika -- nie może zawierać spacji. Zmienne CSS mogą przechowywać dowolną wartość, którą zwykle przypisujesz do właściwości CSS; od prostych wartości, takich jak kolory, po złożone wyrażenia dla skróconych właściwości, takich jak tło lub cień.

Aby użyć zmiennej (aby uzyskać jej wartość), umieść ją w funkcji var() . Nie zapominaj, że wszystkie nazwy zmiennych zaczynają się od -- . To wszystko, co musisz wiedzieć, aby zacząć.

Korzystanie z wartości zastępczych

W przypadku, gdy zmienna nie jest zdefiniowana, do funkcji var() można podać wartość zastępczą jako drugi parametr.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

Nie martw się, jeśli wartość nieruchomości jest złożona. Parametr fallback dopuszcza przecinki (patrz przykład box-shadow ). Pozwala również na łączenie wielu funkcji var() , jak pokazano dla koloru w .custom-text . Jeśli --my-red i --my-blue są niezdefiniowane, jako kolor zostanie użyty czerwony.

Połączenie var() i calc() również działa, bez żadnych niespodzianek w składni. Oto przykład, który zawiera zmienną lokalną, która jest dostępna tylko w klasie, w której została zdefiniowana.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

Używaj calc() oszczędnie. Nie jest to zła rzecz, ale gdy jest nadużywany, staje się dość problematyczny w debugowaniu i utrzymaniu.

Pobieranie i ustawianie zmiennych CSS przez JavaScript

Używając zwykłego JavaScript, możesz ustawić nowe zmienne CSS i uzyskać dostęp do ich wartości. Nie używam tej metody. Zamiast tego wolę zmienić klasę elementu. Jednak nie ma nic złego, jeśli chcesz uzyskać dostęp do zmiennych CSS za pomocą JavaScript. Z pewnością przydaje się w niektórych sytuacjach. Ci, którzy trzymają się jQuery, mogą przekonwertować kod na wtyczkę jQuery.

Aby utworzyć nową zmienną lub zmienić wartość istniejącej, użyj:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

Dostęp do zmiennej jest nieco bardziej złożony. Jeśli zmienna jest zdefiniowana przez JS, użyj:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

Jeśli jednak jest to zdefiniowane za pomocą CSS (i zwykle tak będzie), użyj tego kodu:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

Problemy i rzeczy, na które należy zwrócić uwagę

Teraz, gdy wiesz, jak używać zmiennych, nie przesadzaj z nimi i twórz zmienną dla każdej wartości właściwości w arkuszu stylów. Na przykład byłoby to przesadą i nadużyciem całej koncepcji;

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

Nic nie osiągnąłeś. Właśnie dostałem --spacing-10 zamiast 10px . Wkrótce utworzysz jeszcze dwadzieścia zmiennych dla każdej wartości piksela wypełnienia od 5 do 100 pikseli. Jeśli zależy Ci na spójności, skorzystaj z koncepcji --small-padding, --medium-padding, --large-padding i przypisz odpowiednie wartości liczbowe.

Chociaż nie jest to wymagane przez standard CSS, z całego serca sugeruję zdefiniowanie wszystkich zmiennych w jednym miejscu i na początku pliku CSS . W ten sposób zawsze będziesz wiedział, gdzie się znajdują i możesz szybko zmieniać wartości. Jeśli rozrzucisz definicje po całym pliku, będziesz miał trudności ze śledzeniem rzeczy i może skończyć się definiowaniem tej samej zmiennej w wielu miejscach. Debugowanie to nie będzie zabawne zadanie.

Nie ma powodu, aby nie używać zmiennych CSS

W Internecie sprawy szybko się rozwijają (np. zastępowanie plików cookie przez pamięć lokalną). W przypadku dużych projektów i dużych zespołów przejście na preprocesory CSS, takie jak Saas, jest właściwą drogą. Jednak w przypadku mniejszych projektów lub istniejących projektów, które wymagają konserwacji, właściwym rozwiązaniem są zmienne CSS w czystym CSS . Nie wymagają absolutnie żadnych zmian, aktualizacji oprogramowania lub narzędzi ani niczego. Definiujesz zmienną i zaczynasz jej używać.