Zmienne w CSS są niesamowicie prostym i pomocnym narzędziem, które znacząco ułatwia pracę na stronach WWW.
Do czego są zmienne?
Wyobraźcie sobie, że na stronie mamy sto elementów. Każdy z nich ma ustalony ten sam, czerwony kolor tła i ten kolor jest przypisany w stu różnych selektorach.
Teraz chcemy zmienić kolor tła. Chcemy, aby wszystkie elementy były niebieskie.
Czy to oznacza, że musimy zmieniać kolor we wszystkich stu miejscach?!
Cóż… Jeśli nie korzystamy ze zmiennych, to musielibyśmy tak zrobić.
Natomiast dzięki zmiennym będziemy mogli zmienić wartość w tylko jednym miejscu i wszystkie pozostałe elementy otrzymają pożądane przez nas style.
Jak korzystać ze zmiennych?
Korzystanie ze zmiennych jest bardzo proste. Na początku musimy odwołać się do pseudoklasy :root lub tagu html, a następnie stworzyć zmienną i przypisać do niej jakąś wartość.
:root {
--main-color: tomato;
--secondary-color: lime;
--heading-font-size: 72px;
}Aby stworzyć zmienną, najpierw podajemy dwa minusy --, a następnie ustalamy dowolną nazwę. Nazwa powinna być prosta, ale i dokładna, abyśmy nie musieli zastanawiać się przez 15min, do czego dana zmienna służy.
Zmienna może składać się z jednego lub kilku wyrazów i możemy do niej przypisać dowolną wartość.
Aby wykorzystać zmienną w kodzie, musimy odwołać się do niej za pomocą var().
.element-1 {
background-color: var(--main-color);
// Element 1 będzie miał czerwony kolor tła.
}
.element-2 {
background-color: var(--main-color);
color: var(--secondary-color);
// Element 2 będzie miał czerwony kolor tła oraz zielony kolor czcionki.
}Gdybyśmy chcieli zmienić nasz główny kolor (--main-color) z czerwonego na niebieski, jedyne co musimy zrobić, to podmienić wartość w :root.
:root {
--main-color: royalblue;
--secondary-color: lime;
--heading-font-size: 72px;
}Teraz wszystkie elementy, które miały ustalony kolor za pomocą zmiennej --main-color zostały automatycznie zaktualizowane i są niebieskie! 🙂
Sprawdź też odcinek na YouTube:
Chcesz nauczyć się tworzyć profesjonalne strony internetowe? Sprawdź nasze kursy! 🙂
www.MMCSchool.pl
