Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Zmienne CSS, znane również jako właściwości niestandardowe, pomagają zminimalizować liczbę powtórzeń w arkuszach stylów. To z kolei pomaga zaoszczędzić czas i wysiłek podczas wprowadzania zmian w projekcie. Możesz także mieć pewność, że nie przegapisz żadnych wartości, które musisz zaktualizować.

Dostęp do modelu DOM umożliwia tworzenie zmiennych, przechowywanie ich i ponowne wykorzystywanie w całym arkuszu stylów.

Jak definiować i używać zmiennych CSS

Aby Twoje arkusze stylów były bardziej uporządkowane, łatwe w utrzymaniu i wielokrotnego użytku, możesz wykorzystać zmienne CSS w dowolnej właściwości, która akceptuje wartość.

Weźmy następujący przykład pliku HTML i pliku CSS, który nie używa zmiennych CSS.

HTML:

HTML>
<HTMLlang="pl">
<głowa>
<tytuł>Zmienne CSS — odmiany przyciskówtytuł>
<połączyćrel=„arkusz stylów”href=„Zmienne.css” />
głowa>

<ciało>
<dz>
<h1>Zmienne CSSh1>
<dz>

CSS:

.btn {
wyściółka: 1Rem 1.5 rem;
 tło: przezroczyste;
 grubość czcionki: 700;
 kolor czerwony;
}

Tak powinna wyglądać Twoja strona:

The .btn klasa użyta w powyższym arkuszu stylów nie jest dynamiczna i powoduje utworzenie oddzielnej klasy do dostosowywania poszczególnych przycisków. Tworzenie pięknych stron internetowych wymaga dynamicznego stylu front-end. Implementacja przycisków w ten sposób po prostu sprawi, że zadanie to będzie trudne do wykonania.

Podobnie jak większość języków programowania, musisz zainicjować i zastąpić zmienne CSS.

Aby zainicjować zmienną CSS, poprzedź nazwę zmiennej podwójnymi myślnikami:

:źródło{
/*zmienna CSS*/
--nazwa_zmiennej: wartość;
}

Możesz zainicjować zmienną w dowolnym miejscu, ale pamiętaj, że będziesz mógł użyć tej zmiennej tylko wewnątrz zainicjowanego selektora. Z tego powodu zmienne CSS są tradycyjnie inicjowane wewnątrz głównego selektora. Jest to ukierunkowane na element najwyższego poziomu DOM i umożliwia dostęp do zmiennych w całym dokumencie HTML w skali globalnej.

Aby zastąpić zmienną w swoim stylu CSS, użyjesz metody var() nieruchomość:

:źródło {
/*zmienna CSS*/
 --podstawowy: #900c3f;
 --wtórny: #ff5733;
}
.btn {
wyściółka: 1Rem 1.5 rem;
 tło: przezroczyste;
 grubość czcionki: 700;
 kolor: rozm(--podstawowy);
 kolor tła: rozm(--wtórny);
}
.podstawowe {
 kolor: rozm(--wtórny);
 kolor tła: rozm(--podstawowy);
}

Selektor główny zawiera dwie zmienne: --podstawowy I --wtórny. Obie zmienne są następnie podstawiane do pliku .btn class odpowiednio jako kolor i kolor tła.

Korzystając ze zmiennych, możesz znacznie łatwiej stylizować poszczególne elementy. Używając ponownie zmiennych, możesz szybko zmienić wartość raz, aby aktualizować ją w każdym przypadku.

The var() właściwość może również przyjmować drugi argument. Ten argument działa jako wartość rezerwowa dla pierwszego argumentu w sytuacji, gdy pierwszy argument nie jest zdefiniowany lub jest nieprawidłowy.

Na przykład:

:źródło {
 --podstawowy: #900c3f;
 --wtórny: #ff5733;
}
.btn {
wyściółka: 1Rem 1.5 rem;
 tło: przezroczyste;
 grubość czcionki: 700;
 kolor: rozm(--podstawowy, niebieski);
}

W tym przykładzie zastąp --podstawowy zmienna w kolor styl. Jeśli z jakiegokolwiek powodu ta wartość się nie powiedzie, arkusz stylów użyje drugiej wartości jako rezerwy. Możesz także użyć innej zmiennej CSS jako wartości zastępczej.

Manipulowanie i zastępowanie zmiennych CSS za pomocą JavaScript

Manipulowanie zmiennymi CSS za pomocą JavaScript może być skutecznym sposobem na zmianę wyglądu i sposobu działania witryny w locie. Używając JavaScript, możesz zaktualizować wartości tych zmiennych i zobaczyć zmiany odzwierciedlone w Twojej witrynie.

Należy pamiętać, że zmiany wprowadzone za pomocą JavaScript będą miały zastosowanie tylko do bieżącej sesji. Musisz albo zaktualizować oryginalne źródło, albo przechowuj nową wartość na kliencie, jak w pliku cookie, aby utrwalić zmiany.

Oto przykład użycia JavaScript do aktualizacji wartości zmiennej CSS.

HTML:

HTML>
<HTMLlang="pl">
<głowa>
<tytuł>Zmienne CSS — odmiany przyciskówtytuł>
<połączyćrel=„arkusz stylów”href=„Zmienne.css” />
<scenariusz>
funkcjonowaćZmień kolor() {
// Pobierz element, w którym chcesz zmienić zmienną
konst mój element = dokument.querySelector(":źródło");
// Pobierz aktualną wartość zmiennej
pozwalać bieżącaWartość = getComputedStyle (myElement).getPropertyValue(
"--wtórny"
 );
 // Ustawić the nowywartośćDo the zmienny
mój element.styl.setWłaściwość("--wtórny", "#DAF7A6");
 }
scenariusz>
głowa>
<ciało>
<dz>
<h1>Zmienne CSSh1>
<dz>

CSS:

:źródło {
 --podstawowy: #900c3f;
 --wtórny: #ff5733;
}
.btn {
wyściółka: 1Rem 1.5 rem;
 tło: przezroczyste;
 grubość czcionki: 700;
}
.podstawowe {
 kolor: rozm(--podstawowy);
 kolor tła: rozm(--wtórny);
}

W tym kodzie JavaScript plik Zmień kolor() funkcja aktualizuje kolor pierwszego przycisku, gdy użytkownik go kliknie.

Za pomocą Metody przechodzenia przez DOM, możesz uzyskać dostęp do klas lub selektorów zastosowanych w dokumencie HTML i manipulować wartościami.

Przed kliknięciem przycisku:

Po kliknięciu przycisku:

Możesz także użyć JavaScript, aby utworzyć nowe zmienne CSS lub całkowicie je usunąć.

Na przykład:

// Tworzyć A nowyzmienny
dokument.documentElement.style.setProperty('--nowy kolor', 'niebieski');
// Usuń zmienną
dokument.documentElement.style.removeProperty('--nowy kolor');

Używanie zmiennych CSS z preprocesorami

Używanie zmiennych w technologii frontendowej było początkowo osiągane za pomocą preprocesorów CSS, takich jak SASS, LESS i rysik.

Celem preprocesorów CSS jest tworzenie kodu rozszerzającego podstawowe możliwości standardowego CSS. Następnie skompiluj ten kod do standardowego CSS, aby przeglądarka mogła go zrozumieć, podobnie jak TypeScript współpracuje z JavaScriptem.

Wraz z rozwojem zmiennych CSS preprocesory nie są już tak ważne, ale nadal mogą być przydatne w połączeniu ze zmiennymi CSS w twoim projekcie.

Możesz zdefiniować zmienną SASS $główny-kolor i użyj go do ustawienia wartości zmiennej CSS. Następnie użyj zmiennej CSS w zwykłej klasie stylu.

Możesz także użyć funkcji SASS do manipulowania wartościami zmiennych CSS.

Na przykład:

:źródło {
 --podstawowy: $główny-kolor;
 --drugorzędne: rozjaśnij(rozm(--podstawowy), 20%);
}
.btn {
 kolor: rozm(--podstawowy);
 kolor tła: rozm(--wtórny);
}

Tutaj funkcja SASS rozjaśnić() manipuluje wartością --podstawowy uzyskać wartość dla --wtórny.

Zauważ, że zmienne SASS nie są dostępne dla JavaScript. Więc jeśli musisz manipulować wartościami swoich zmiennych w czasie wykonywania, powinieneś użyć zmiennych CSS.

Używając razem zmiennych CSS i preprocesorów, możesz skorzystać z obu korzyści, takich jak używanie potężne funkcje preprocesora, takie jak pętle i funkcje, oraz funkcje zmiennych CSS, takie jak CSS kaskadowo.

Wskazówki dotyczące używania zmiennych CSS w tworzeniu stron internetowych

Oto kilka ważnych wskazówek, które pomogą Ci lepiej wykorzystać zmienne CSS.

Zacznij od jasnej konwencji nazewnictwa

Wybierz konwencję nazewnictwa zmiennych, która ułatwi ich zrozumienie i użycie. Na przykład użyj przedrostka, takiego jak --kolor- dla zmiennych kolorów lub --rozstaw- dla zmiennych odstępów.

Użyj zmiennych w zapytaniach o media, aby ułatwić dostosowanie projektu do różnych rozmiarów ekranu.

Wykorzystaj kaskadową naturę CSS

Pamiętaj, że zmienne CSS są kaskadowe, co oznacza, że ​​jeśli ustawisz zmienną na elemencie nadrzędnym, wpłynie to na wszystkie jego elementy podrzędne.

Ostrożnie używaj zmiennych CSS

Używanie zbyt wielu zmiennych CSS może powodować zamieszanie, więc używaj ich ostrożnie i tylko wtedy, gdy ma to sens i poprawia łatwość utrzymania kodu.

Przetestuj swoje zmienne

Zmienne CSS to wyjątkowy sposób na pisanie przejrzystego i łatwego w utrzymaniu kodu w arkuszu stylów.

Należy zauważyć, że nadal nie są one w pełni obsługiwane we wszystkich przeglądarkach. Dlatego należy przetestować zmienne pod kątem zgodności z przeglądarką, aby upewnić się, że działają one zgodnie z oczekiwaniami i że wszelkie wartości awaryjne działają zgodnie z oczekiwaniami.