Jak używać zmiennych CSS jak profesjonalista
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:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary">Primary</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: red;
}
Tak powinna wyglądać Twoja strona:
Klasa .btn użyta w powyższym arkuszu stylów nie jest dynamiczna i powoduje utworzenie osobnej klasy w celu dostosowania 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:
:root{
/*CSS variable*/
--variable_name: value;
}
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 właściwości var() :
:root {
/*CSS variable*/
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary);
background-color: var(--secondary);
}
.sub-primary {
color: var(--secondary);
background-color: var(--primary);
}
Selektor główny zawiera dwie zmienne: –primary i –secondary . Obie zmienne są następnie podstawiane do klasy .btn 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.
Właściwość var() może również przyjąć 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:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary, blue);
}
W tym przykładzie zamień zmienną –primary na styl koloru . 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. Aby zachować zmiany, musisz zaktualizować oryginalne źródło lub zapisać nową wartość na kliencie, na przykład w pliku cookie.
Oto przykład użycia JavaScript do aktualizacji wartości zmiennej CSS.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
<script>
function changeColor() {
// Get the element you want to change the variable on
const myElement = document.querySelector(":root");
// Get the current value of the variable
let currentValue = getComputedStyle(myElement).getPropertyValue(
"--secondary"
);
// Set the new value for the variable
myElement.style.setProperty("--secondary", "#DAF7A6");
}
</script>
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary" onclick="changeColor()">
Primary
</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
}
.sub-primary {
color: var(--primary);
background-color: var(--secondary);
}
W tym kodzie JavaScript funkcja changeColor() aktualizuje kolor pierwszego przycisku, gdy użytkownik go kliknie.
Korzystając z metod przechodzenia 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:
// Create a new variable
document.documentElement.style.setProperty('--new-color', 'blue');
// Remove a variable
document.documentElement.style.removeProperty('--new-color');
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 Stylus.
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 działa TypeScript z JavaScript.
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 $main-color i użyć jej 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:
:root {
--primary: $main-color;
--secondary: lighten(var(--primary), 20%);
}
.btn {
color: var(--primary);
background-color: var(--secondary);
}
Tutaj funkcja SASS lighten () manipuluje wartością –primary w celu uzyskania wartości dla –secondary .
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życie zaawansowanych funkcji preprocesora, takich jak pętle i funkcje, oraz funkcji zmiennych CSS, takich jak kaskadowanie CSS.
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 –odstęp- dla zmiennych odstępów.
Użyj zmiennych w zapytaniach o media
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.
Dodaj komentarz