Przewodnik dla początkujących po zmiennych CSS (inaczej właściwości niestandardowe CSS)

Spis treści:

• Zmienne CSS w preprocesorach #
• Zmienne (właściwości niestandardowe) w natywnym CSS #
• Dlaczego „właściwości niestandardowe”? #
• Gdzie są zdefiniowane zmienne CSS? #
• Uwagi techniczne dotyczące zmiennych CSS #
• Zrozumienie funkcji var() #
• Używanie zmiennych CSS z calc() #
• Sztuczki ze zmiennymi CSS #

Zmienne CSS w preprocesorach

Preprocesory CSS używają zmiennych CSS od ponad 10 lat. Nie będę tutaj szczegółowo omawiał tych opcji, ale myślę, że warto wiedzieć, w jaki sposób każda z popularnych bibliotek preprocesorów wykorzystuje zmienne.

W Sass (lub SCSS) deklarujesz zmienne w następujący sposób:

Zwróć uwagę na znak dolara ($). Pierwsza linia to deklaracja zmiennej i jej wartości. Dwa poniższe bloki to przykłady zmiennych używanych w dalszej części arkusza stylów.

Zmienne w Less.js używają symbolu @ :

A w Stylusie zmienne wyglądają tak:

Możesz zapoznać się z poszczególnymi sekcjami dokumentacji dla każdego z preprocesorów pokazanych powyżej, jeśli chcesz dokładniej przyjrzeć się zmiennym przy użyciu tych technologii innych firm.

Zmienne (właściwości niestandardowe) w natywnym CSS

To prowadzi nas do zmiennych CSS lub właściwości niestandardowych, ponieważ są one zdefiniowane w specyfikacji CSS. Aby zadeklarować zmienną w zwykłym CSS, umieść dwa łączniki przed niestandardową nazwą wybraną dla zmiennej lub właściwości, a następnie użyj funkcji var() , aby umieścić tę wartość w dowolnym miejscu:

W tym przykładzie zdefiniowałem dwie zmienne CSS: --main i --accent . Następnie użyłem każdej zmiennej CSS na dwóch różnych elementach, demonstrując elastyczność, jaką otwierają.

Podobnie jak w przypadku zmiennych w dowolnym języku programowania, pozwala to zadeklarować zmienną w jednym miejscu. Jeśli później zechcesz zmienić tę wartość w dowolnym miejscu w arkuszu stylów, wystarczy zmienić oryginalną deklarację, która będzie miała zastosowanie do wszystkich miejsc, w których użyjesz zmiennej.

Dlaczego „właściwości niestandardowe”?

W codziennych rozmowach programiści często określają tę funkcję jako „zmienne CSS”, zgodnie z tym, jak preprocesory i języki programowania odnoszą się do tej samej funkcji. Jednak ze ściśle technicznego punktu widzenia nie są to tak naprawdę „zmienne”, ale raczej właściwości niestandardowe .

Mają taką samą składnię, jak każda predefiniowana właściwość w CSS, z wyjątkiem dwóch myślników, które pojawiają się przed nazwą właściwości. Dwie myślniki pozwalają autorom CSS na użycie dowolnego poprawnego identyfikatora z kreską bez obawy o konflikt ze zwykłymi właściwościami CSS.

Specyfikacja wyjaśnia, że ​​same dwa myślniki są nieprawidłowe (najwyraźniej zarezerwowane do przyszłego użytku), a CSS nigdy nie nada znaczenia żadnemu poprawnemu identyfikatorowi myślnikowemu poza jego użyciem jako niestandardowej właściwości zdefiniowanej przez autora.

W przeciwieństwie do zwykłych właściwości CSS, we właściwościach niestandardowych rozróżniana jest wielkość liter. Oznacza to, że --main-color to nie to samo co --Main-Color . Prawidłowe znaki, które należy uwzględnić w nazwie właściwości niestandardowej, to litery, cyfry, podkreślenia i łączniki.

Gdzie są zdefiniowane zmienne CSS?

Jak widać w powyższym przykładzie, często zobaczysz niestandardowe właściwości CSS zdefiniowane bezpośrednio na głównym elemencie dokumentu HTML lub shadow DOM. Służy do tego selektor pseudoklas :root .

Ale zmienne CSS nie ograniczają się tylko do definiowania ich na elemencie głównym i często korzystne jest zdefiniowanie ich w innym miejscu. Selektor :root jest często wybierany, ponieważ zawsze dotyczy najwyższego elementu w drzewie DOM (niezależnie od tego, czy jest to pełny dokument, czy DOM-cień).

W większości przypadków uzyskasz ten sam wynik, definiując niestandardowe właściwości elementu html (który jest elementem głównym w dokumentach HTML) lub nawet elementu body . Użycie :root pozwala, aby kod był bardziej odporny na przyszłość (np. jeśli specyfikacja pewnego dnia doda nowy element jako główny, CSS pozostanie taki sam) i przypuszczam, że pozwala również na zastosowanie arkusza stylów do innego typu dokumentu, który ma inny element główny.

Na przykład poniższy kod ograniczyłby twoje niestandardowe właściwości do użycia tylko w elemencie .sidebar :

W celach demonstracyjnych często zobaczysz zmienne zdefiniowane w :root , ale możesz ich używać wszędzie tam, gdzie jest to praktyczne. W rzeczywistości wielu programistów zaleca ustawienie ich niżej w drzewie DOM dla mniejszych modułów podczas początkowego rozwoju, a następnie pójście w górę w kierunku :root podczas tworzenia wartości o większym zakresie.

Uwagi techniczne dotyczące zmiennych CSS

Oprócz możliwości zastosowania do dowolnego elementu, zmienne CSS są dość elastyczne i łatwe w obsłudze.

Oto kilka rzeczy, na które warto zwrócić uwagę:

• Są rozwiązywane za pomocą zwykłego dziedziczenia CSS i reguł kaskadowych
• Możesz ich używać w zapytaniach o media i innych regułach warunkowych
• Możesz je zdefiniować w atrybucie style elementu
• Można je odczytać lub ustawić za pomocą funkcji modelu obiektów CSS.

Warto również zauważyć, że zasadniczo można zagnieżdżać zmienne CSS. Zwróć uwagę na następujący przykład:

Zauważ, że zdefiniowałem --main-color , a następnie używam tej samej nazwy zmiennej jako wartości dla następującej zmiennej CSS.

Możesz również użyć słowa kluczowego !important w wartości zmiennej CSS, ale dotyczy to tylko „ważności” samej zmiennej w odniesieniu do innych definicji zmiennych, a nie wartości, która jest używana w jednym lub kilku elementach w dokumencie. Jeśli jest to mylące, oto przykład:

W powyższym przykładzie kolor tła byłby „jasnoniebieski”, mimo że pomarańczowy pojawia się później w definicjach zmiennych. Ale sama wartość tła na elemencie body nie miałaby żadnego znaczenia.

Zmienne CSS mogą również zawierać wartości słów kluczowych z całego CSS, takie jak initial , inherit i unset , ale właściwość all nie wpływa na zmienne CSS (tj. nie są resetowane).

Zrozumienie funkcji var()

Widziałeś już funkcję var() używaną w kilku typowych przykładach w tym samouczku dotyczącym zmiennych CSS. Ale var() to coś więcej niż to, co omówiłem do tej pory.

Po pierwsze, funkcja var() jest poprawna tylko w wartości; nazwa właściwości lub selektor nie może używać zmiennej CSS. Ponadto wartość zapytania o media nie może używać zmiennej CSS (np @media (max-width: var(--my-var)) jest nieprawidłowa).

Funkcja var() przyjmuje dwa argumenty:

• Nazwa niestandardowej właściwości do uwzględnienia
• Wartość zastępcza w przypadku, gdy właściwość niestandardowa jest nieprawidłowa

Oto przykład, w którym drugi argument zaczyna obowiązywać:

Zauważ, że w powyższym kodzie napisałem początkową nazwę zmiennej używając brytyjskiego lub kanadyjskiego słowa „color”, ale kiedy użyłem zmiennej, włączyłem amerykańską pisownię „color”. To sprawia, że ​​zmienna jest technicznie nieprawidłowa i zamiast tego zaczyna obowiązywać zwykłe szare tło ( #ccc ).

Zwróć też uwagę, że wartość zastępcza może zawierać własne przecinki. Na przykład, jeśli twoją rezerwą jest stos czcionek, byłby to prawidłowy sposób jego zdefiniowania:

Zauważ ponownie, że moja zmienna ma błąd, deklarując nieznany --main-type zamiast --main-font . To wyzwala wartość zastępczą, która jest alternatywnym stosem czcionek. Tak więc wszystko po pierwszym przecinku (nawet włączając inne przecinki) jest wartością zastępczą.

Używanie zmiennych CSS do podszablonów

Podczas definiowania zmiennej CSS wartość, którą przechowuje, nie musi sama w sobie być prawidłową wartością CSS; może to być wartość częściowa, która może być używana jako część wartości całkowitej.

Na przykład możesz rozbić stos czcionek:

W tym przypadku każda z wartości zmiennej działa samodzielnie, ale pokazuje sedno. Spróbujmy bardziej wymyślnego przykładu, używając notacji kolorów rgba() :

Możesz zobaczyć, jak przydatne może to być, pozwalając zasadniczo na dynamiczne „budowanie” wartości.

Używanie zmiennych CSS z calc()

Jednym z użytecznych sposobów włączenia zmiennych CSS do projektów jest połączenie z funkcją calc() . Jak zapewne wiesz, calc() umożliwia wykonywanie obliczeń w obrębie wartości. Możesz więc zrobić coś takiego:

Niestandardowe właściwości CSS pozwalają przenieść calc() na wyższy poziom, na przykład z predefiniowanymi rozmiarami. Ahmad Shadeed opisał coś podobnego i oto przykład:

Mając to na uwadze, mogę używać zestawów reguł .module i .module-* w zapytaniach o media, co pozwala mi wyświetlać te style w sposób warunkowy dla określonych rozmiarów widocznych okien lub innych funkcji multimediów. Małe/średnie/duże moduły miałyby te same klasy, co moduł podstawowy, ale w razie potrzeby nadpisywany jest tylko rozmiar modułu. W powyższym przykładzie początkowa wartość 240 dla rozmiaru działa jako rodzaj wartości domyślnej, ale mógłbym również przekazać 240px jako drugi argument w var() , aby działał jako rezerwa.

Sztuczki ze zmiennymi CSS

Kilku programistów na przestrzeni lat dzieliło się wskazówkami i sztuczkami przy użyciu zmiennych CSS. Nie będę ich tutaj szczegółowo omawiał, ponieważ jest to głównie samouczek dla początkujących, ale oto krótkie podsumowanie niektórych z nich:

• Jak wspomniałem wcześniej, możesz używać zmiennych CSS w stylach wbudowanych, tak jak w przypadku boksów o proporcjach.
• Znak spacji to poprawna wartość zmiennej CSS, która pozwala na wykonanie triku włączania/wyłączania (np. dla czegoś takiego jak tryb ciemny), o czym możesz przeczytać w poście Lei.
• Nie możesz pisać stylów najechania w stylach wbudowanych, ale możesz to obejść za pomocą zmiennych CSS.
• Zmienne CSS pomagają łatwiej tworzyć wielokolorowe pliki SVG, jak opisano tutaj.
• Możesz budować praktyczne i łatwe w utrzymaniu systemy projektowania i motywy za pomocą zmiennych CSS, szczegółowo omówionych w tym poście
• Możesz użyć zmiennych CSS do tworzenia bardziej wydajnych i łatwych w utrzymaniu siatek za pomocą funkcji układu siatki, jak opisał Michelle Barker.

Wniosek

Zmienne CSS lub niestandardowe właściwości CSS są gotowe do użycia już dziś, a ponad 90% używanych przeglądarek na całym świecie obsługuje tę przydatną funkcję. Mam nadzieję, że ta dyskusja na temat podstaw i składni zachęci Cię do rozważenia zmiennych CSS w swoich najnowszych projektach, jeśli jeszcze tego nie zrobiłeś.

Jeśli twoje użycie zmiennych CSS zostało ograniczone do niektórych globalnych kolorów motywu, być może ten samouczek zainspiruje cię do większego ich wykorzystania i być może wymyślenia własnych sztuczek.

Teraz, gdy skończyłeś ze zmiennymi CSS, zapoznaj się z innymi naszymi przewodnikami:

• Układ siatki CSS
• Wprowadzenie do Parcel.js
• Samouczek CSS flexbox
• Pakiet dla początkujących
• Samouczek mikrointerakcji dla początkujących programistów

Jeśli masz jakiekolwiek pytania dotyczące tego samouczka CSS Variables, możesz je przesłać w komentarzach poniżej.

Układ i prezentacja autorstwa Chrisa Fitzgeralda i Karola K.