Co to są zmienne CSS i jak ich używać
Opublikowany: 2022-02-16Podczas pisania kodu CSS dla swojej witryny możesz skorzystać z niestandardowych właściwości CSS (zmiennych), aby przyspieszyć proces rozwoju. Możesz użyć zmiennych do zdefiniowania właściwości (rozmiar, kolor), które następnie można zastosować do kilku elementów.
W ten sposób można mieć większą kontrolę nad kodem i projektem. Zmiana wartości zmiennej w jednym miejscu nadpisuje wartość tej właściwości wszędzie tam, gdzie jest wywoływana.
W tym poście wyjaśnimy, jak korzystać ze zmiennych CSS i kilka praktycznych zastosowań.
Zaczynajmy!
Deklarowanie zmiennej
Zmienne mogą mieć zasięg globalny lub lokalny. Aby zdefiniować zmienną globalnie, użyj selektora :root.
:root { --base-font-size: 1.1rem; } :root { --base-font-size: 1.1rem; }Selektor :root pasuje do katalogu głównego dokumentu, czyli w naszym konkretnym przypadku <html> .
Aby zadeklarować niestandardową właściwość CSS (zmienna), zacznij od dwóch myślników (--). W zmiennych rozróżniana jest wielkość liter, na przykład:
--base-font-size i --Base-Font-Size to dwie różne zmienne.
Aby zdefiniować zmienną lokalnie, użyj selektora elementu, w którym chcesz użyć zmiennej.
#first-container { --background: #ccc; } #first-container { --background: #ccc; }Po zdefiniowaniu zmiennej konieczne jest jej wywołanie.
Funkcja var()
Funkcja var() służy do wstawiania wartości zdefiniowanej zmiennej CSS. Funkcja zastępuje się wartością zmiennej. Spójrzmy na przykład:
Kod HTML
- Skopiuj i wklej ten kod do swojego edytora kodu.
- Zapisz plik jako index.html .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> 
Kod CSS
- Utwórz plik o nazwie style.css (w tym samym katalogu index.html ).
- Wklej poniższy kod i zapisz plik.
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } 
Jest tu kilka rzeczy, na które warto zwrócić uwagę:
- Tworzenie palety kolorów to prosty proces.
- Możliwe jest użycie zmiennej wewnątrz definicji innej zmiennej, podobnie jak kolor w definicji zmiennych obramowania.
- Zmienne są dziedziczone, właściwość color elementu .container-* wpływa na jego bezpośrednie dzieci. W tym przypadku element <p>.
Aby przesłonić zmienną, deklarujesz ją w jej kontenerze, czyniąc ją bardziej szczegółową.
- Edytuj kod CSS:
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } 
Zmienne i zapytania o media
Zmienne mogą być również dziedziczone i zastępowane w zapytaniach o media CSS.
- Dodaj ten kod do zmiennych:
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; } :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }Zdefiniowaliśmy szerokość bazową elementu wrappera. Możemy teraz zastosować te zmienne do właściwości .wrapper width.
- Dodaj ten kod na końcu pliku CSS:
.wrapper { width: var(--wrapper-width);
margin: 0 auto; } .wrapper { width: var(--wrapper-width);
margin: 0 auto; } 
Aby zdefiniować zapytanie o media dla urządzeń z ekranami o szerokości mniejszej niż 1100px, piszemy następujące zapytanie o media.
- Edytuj kod CSS:
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } 
Nowa definicja zmiennej w zapytaniu o media zastępuje jej wartość. Zauważ też, że zmienna jest dostępna w DOM, co oznacza, że można ją pobrać i manipulować za pomocą JS. Nie jest to możliwe w przypadku zmiennych w preprocesorach CSS.
Streszczenie
Zmienne są przydatne do organizowania i zarządzania małymi i dużymi ilościami CSS. Ograniczają powtórzenia, a tym samym zapobiegają błędom. Zmienne CSS są dynamiczne, co oznacza, że można je zmieniać w czasie wykonywania. Łatwo jest dynamicznie utworzyć motyw witryny lub aplikacji za pomocą zmiennych CSS. Zapewniają możliwość przypisywania wartości do właściwości CSS o niestandardowej nazwie. Zmienne podlegają standardowym zasadom kaskadowania, dzięki czemu możliwe jest zdefiniowanie tej samej właściwości na różnych poziomach szczegółowości.
Mam nadzieję, że podobał Ci się ten samouczek. Dziękuje za przeczytanie!