Jak skonfigurować tematyce witryny z zmiennymi CSS

Feb 9, 2026
Jak
laptop

Właściwości niestandardowe CSS, powszechnie znane jako zmienne CSS, są teraz obsługiwane przez wszystkie główne nowoczesne przeglądarki. Oznacza to, że w przypadku projektów, które nie są obciążone, konieczności wspierania starszych przeglądarek, takich jak Internet Explorer, zmienne CSS można rozważyć - dla wszystkich intencji i celów - bezpieczny w użyciu.

Wielu deweloperów używa już zmiennych z preprocesorami, takimi jak Sass lub Mniej jako środek zmniejszania powtarzania kodu. Rodzime zmienne CSS działają w dużej mierze w ten sam sposób, ale nie wymagają żadnego dodatkowego kroku kompilacji, kaskada jak regularna właściwość CSS, a co najważniejsze, są dostępne w czasie wykonywania. (Aby upewnić się, że Twoja witryna działa płynnie, upewnij się, że wybrałeś prawo hosting usługa.)

  • Co to jest Sass?

Korzyści te dają rodzime zmienne CSS krawędź nad ich rodzeństwem przedprocesorowym i otwiera drzwi dla deweloperów, aby wykonać wiele ciekawych rzeczy o wiele mniej kodu. Zainteresowany opcjami zero-kodu dla Twojej witryny? Oto nasz przewodnik na szczycie Kreator strony internetowej .

W tym samouczku będziemy badać, jak możemy użyć zmiennych CSS, aby wdrożyć witrynę w aplikacji Mock Web NOTEAPP. Spowoduje to angażowanie pisania CSS. i Javascript. Aby umożliwić użytkownikowi zmianę schematu kolorów i przełączyć ilość pokazanych kolumn. Następnie wykorzystamy interfejs API do przechowywania stron internetowych, aby upewnić się, że wszelkie zmiany są zapisywane dla przyszłych sesji.

Uzyskaj pliki samouczka

Najpierw pierwsze rzeczy, pobierz pliki projektu Pliki projektantów internetowych (Wydanie 264). Uwaga: Pierwsze użytkownicy będą musieli zarejestrować, aby korzystać z plików.

01. Skonfiguruj obszar roboczy

w / Szablon strony internetowej Katalog znajdziesz Static NOTEAPP Strona internetowa, w której będziemy wdrażać tematykę witryny za pomocą zmiennych CSS i interfejsu API do przechowywania stron internetowych. Otwórz katalog w preferowanym edytorze tekstu.

02. Skonfiguruj nasze zmienne CSS

W Main.css. , znajdziesz dużo CSS Project. Na górze utwórz blok kierujący korzeń klasa pseudo. W nim zdefiniuj zmienne, takie jak w fragmence poniżej. Ten blok korzeniowy zawiera zmienne globalne, które kaskadują przez nasze arkusze stylów, jak każda regularna nieruchomość CSS. 

: Root {
  - Primary: # 2F353E;
  - econdary: # 2B9BCA;
  --Torski: # F3583F;
  - Katalog: # E0E1E2;
  - dziczyzna: #ffffff;
}

03. Wymień kolory z zmiennymi

Przejdź przez arkusz stylów, ręcznie lub używając wyszukiwania / wymiany, i zamień wszystkie kody szesnastkowe kolorów statycznych z ich odpowiedniej zmienną z bloku korzenia. Aby to zrobić, użyj var. Funkcja i podaj nazwę zmiennej. Dotyczy to przeglądarki do odwołania do wartości zmiennej. Na przykład: 

 .C-Header {
  Tło-kolor: var (- podstawowy);
  kolor: var (- quinarn);
}

04. Zlokalizuj Inline SVG dla ikon

otwarty index.html. I jedną z pierwszych rzeczy, które zauważysz, jest dużym elementem SVG. Zawiera ścieżki do wszystkich ikon strony, każdy zawinięty w element symbolu i podał unikalny identyfikator. Symbole te odwołują się w razie potrzeby posługiwać się Element, pozwalający na ponowne wykorzystanie ikon bez powielania kodu SVG.

05. Dodaj zmienne CSS do SVG

Jedną z korzyści z wykorzystaniem inline SVG zamiast pliku .svg jest to, że CSS może uzyskać dostęp do swojej wewnętrznej struktury. Oznacza to, że nasze zmienne CSS (sprawdź obsługę przeglądarki tutaj ). W index.html. , Wymień blok stylu SVG za pomocą fragmentu poniżej. Teraz każdy z kolorów SVG są powiązane z wartościami naszych zmiennych CSS. 

 & LT; Style & GT;
  .podstawowa {
  Wypełnij: var (-primary, # 2f353e);
  }
  .wtórny {
  wypełnij: var (-secondary, # 2B9BCA);
  }
& LT; / Style & GT;

06. Utwórz zmienną kolumn

Możemy również użyć zmiennych CSS dla właściwości innych niż kolor. Utwórz nową zmienną w bloku korzeniowym, zadzwoń do tego kolumny i daj mu wartość 3. Należy spełnić domyślną wartość Kolumny UI komponent na stronie. Gdy funkcjonalny komponent ten przełączy liczbę kolumn. 

: Root {
  - Primary: # 2F353E;
  - econdary: # 2B9BCA;
  --Torski: # F3583F;
  - Katalog: # E0E1E2;
  - dziczyzna: #ffffff;
  - Kolumny: 3;
}

07. Wdrożenie przełączania kolumn

Korzystanie z naszych nowych kolumn zmiennych i Calc () Funkcja, teraz obliczymy, jak szeroki inny składnik nutowy powinien być w celu utworzenia prawidłowej liczby kolumn. Na przykład, jeśli kolumny są ustawione na 4, każda notatka powinna mieć szerokość 25%. 

 .C-Uwaga {
  Szerokość: Calc (100% / VAR (- kolumny));
}

08. Dodaj klasy JS i atrybuty danych

Przy stosowaniu zachowań JS do elementu Dom, zaczepić do niej za pomocą klasy z prefiksem JS. To Dekonuje funkcjonalne aspekty elementu z CSS. Dodajmy js-update-zmienna klasa do wszystkich wejść kolorów i radiowych, a także atrybut danych. Odwołanie do odpowiedniej zmiennej do aktualizacji. 

 Typ wejścia = "Kolor" Value = "# 2F353E"
klasa = "zmienna" JS-update-zmienna U-ukryta wizualnie "
zmienna danych = "podstawowa" & gt;

09. Dodaj JS, aby zaktualizować zmienne CSS

otwarty Main.js.js. i dodaj fragment poniżej. To pętle przez całe nasze js-update-zmienna Wejścia i dodaje Logikę, tak na zmianę zmienna odniesienia w atrybucie zmiennej danych jest aktualizowany za pomocą wartości wejściowej. Próbki kolorów i przełączanie kolumn powinien teraz działać! 

 var valrig = dokument
.QuerySelestecalall (". JS-Aktualizacja-zmienna");
Dla (Var I = 0; I & LT; vartrig.length; i ++) {
valrig [i]
.addeventlistener ("Zmień", funkcja () {
dokument.documentElement.style.
.setProperty ("-" + to.dataset.Variable,
to.Value);
});
}

10. Dołącz klasę JS do przycisku Zapisz

Sense ma sens, aby zapisać tylko schemat kolorów użytkownika, gdy klikną przycisk Zapisz, ponieważ pozwala im eksperymentować z tematami tak bardzo, jak chcieli, bez automatycznego nadrzędnego nadrzędnego bieżącego. Zacząć, dodaj .js-save-colors do Zapisać przycisk, aby funkcjonować jako nasz hak JS. 

 & LT; Class Class = "C-Przycisk JS-Save-Colors"
Data-modal = "js-modal" Data-modal
-Content = "JS-Colors-Modal-Content" & GT;
Zapisz & LT; / Button & GT;

11. Utwórz tablicę kolorów

Z powrotem Main.js.js. , deklaruj nową zmienną o nazwie zabarwienie i przypisz do niego nową tablicę zawierającą wszystkie zmienne kolorów, które chcemy zostać zapisane po kliknięciu przycisku Zapisz. 

 Var Colors = [
  "podstawowa",
  "wtórny",
  "trzeciorzędowy",
  "czwartorzędowy",
  "pięcioraki"
];

12. Zbuduj słuchacz zdarzenia zdarzenia

Poniżej tablicy kolorów należy utwórz słuchacza zdarzenia kliknięcia dla JS-Save-Colors Klasa, którą wcześniej dodaliśmy do przycisku Zapisz. Wewnątrz tworzy nową zmienną o nazwie htmlstyles. i przypisuj go właściwości obsługiwane głównego elementu HTML. Wykorzystamy to, aby uzyskać dostęp do naszych zmiennych CSS. 

 Document.QuerySelector (". JS-Save-Colors")
.addeventlistener ("Kliknij", funkcja () {
var htmlstyles = okno
.getcomputertysty (dokument.
.QuerySelector ("HTML")),
}),

13. Rekordowe zmienne kolorów CSS

Następnie w przypadku słuchacza zdarzeń utwórz nową zmienną o nazwie Colourstosave. i przypisz go pusty obiekt. Następnie utwórz DLA pętla za pomocą zabarwienie tablica z kroku 11. W ramach dodamy kompletny rekord kluczy / wartości zmiennych wymienionych w zabarwienie Tablica do The. Colourstosave. obiekt. 

 Array do obiektu "Colourstosave".
Colourstosave = nowy obiekt;
dla (var i = 0; i colours.length; i ++) {
Colourstosave [kolory [i]] = htmlstyles
.getPropertyValue ("-" + kolory [I]);
}

14. Wyślij Colourstosave do LocalStorage

Teraz mamy wszystkie zmienne kolorowe Colourstosave. , wyślemy go do składnika interfejsu API Storage Web Callestorage. Jest to zasadniczo obiekt, który utrzymuje się na sesjach. Możemy przechowywać inne obiekty w nim za pomocą jego Setitem () metoda. Wyślijmy to nasze Colourstosave. obiekt. 

 Localstorage.SetiTem ("Kolory",
JSON.Stringify (Colourstosave));

15. Dodaj klasę JS do kolumn

Oprócz kolorów chcemy również upewnić się, że nasze wybrane kolumny liczba utrzymuje się również na sesjach. Pierwszy krok w kierunku tego byłoby dodać JS-Update-kolumny do wszystkich wejść radiowych w komponencie kolumn. 

 / LT; ​​Typ wejścia = "Radio" Nazwa = "Kolumny"
= "JS-Aktualizacja-zmienna JS-Update-Columns
U-ukryty wizualnie "wartość =" 1 "
Zmienna danych = "Kolumny" i GT;

16. Wyślij kolumny do LocalStorage

Dla każdego JS-Update-kolumny , będziemy następowani przypisać słuchaczy zdarzeń, aby obserwować zmiany. W przypadku wykrywania wyślemy aktualną wartość kolumny zmienna do Lokalny magazyn , znowu używając jego Setitem () metoda. W przeciwieństwie do kolorów, nie musimy strugać tej wartości, ponieważ nie jest to obiekt. 

 Var Colinputs = Dokument
.QuerySelectorall (". JS-Update-kolumny");
dla (var i = 0; i & lt; colinputs; i ++) {
colinputs [i] .addeventlistener ("zmiana",
Funkcja () {var htmlstyles = okno
.getcomputertysty (dokument.
.QuerySelector ("HTML"));
localstorage.setitem ("kolumny",
htmlstyles.getpropertyValue ("- kolumny"));
});}

17. Uchwyt nowych sesji

Jeśli użytkownik powróci po uprzednio wybraniu preferencji kolorów i kolumn, musimy zbudować logikę, aby te zapisane dane zostaną odwrócone do zmiennych CSS. Pierwszym krokiem jest zdefiniowanie DOMCONTENTOLEDED. słuchacz zdarzeń, a potem gdyby Oświadczenie o sprawdzeniu zapisanych danych w LocalStorage za pomocą jego Zdobądź przedmiot() metoda. 

 Document.addeventlistener
("DOMCONTENTOnied", funkcja () {
Jeśli (localstorage.getitem ("kolory")) {
}
if (localstorage.getitem ("kolumny")) {
}
});

18. Zmieniająca zmienne kolorów

W kolorach gdyby Oświadczenie, utworzyć nową zmienną o nazwie Savedcolours. i przypisz go wartość analizowanego obiektu kolorów Lokalny magazyn . Używać DLA W pętla Savedcolours. , Chwyć każdą parę klawiszy / wartości i załóż go do głównego elementu HTML jako zmienną CSS. 

 Var SavedColours = JSON.PARSE
(localstorage.getitem ("kolory"));
Dla (kolor w SavedColours) {
dokument.documentElement.style.setProperty.
("-" + kolor, zaoszukiwane [kolor]); }

19. Zbierz dane z zmiennych kolumn

Zanim będziemy mogli zmienić zmienną kolumn, musimy najpierw chwycić odniesienia do zapisanych danych Lokalny magazyn a także wejścia radiowe w ramach Kolumny składnik. Ten ostatni jest więc możemy aktualizować swój stan, aby upewnić się, że prawidłowy numer jest wstępnie wybrany. 

 Var Columns = LocalStorage
.getitem ("kolumny"),
Columntriggers = Dokument.
QuerySelectorall (". JS-Update-kolumny");

20. Zmienna zmienna i państwo

Wreszcie zaktualizujemy zmienną CSS kolumn z zapisaną Lokalny magazyn odpowiednik i ustaw sprawdzony atrybut odpowiedniego wejścia radiowego w ramach Kolumny komponent do prawdziwych. The. Kolumny - 1. ma zrekompensować fakt, że kolumny Nodokselista jest zero oparte. 

 Document.documentElement.style
.setProperty ("- kolumny", kolumny);
ColumnTriggers [kolumny - 1] .checked = true;

21. Sprawdź gotowy produkt

NoteApp page

Gotowy produkt: wszystko na stronie Mock Noteapp powinien teraz pracować

Otóż ​​to! Wszystko na stronie Mock Noteapp teraz działa. Możesz utworzyć swój własny schemat kolorów, klikając Próbki, a następnie zobowiązuje go Lokalny magazyn przez przycisk Zapisz. Jeśli chcesz przełączyć ilość wyświetlanych kolumn, kliknij odpowiedni numer w komponencie kolumn.

I pamiętaj, że zawsze warto aktualizować magazyn w chmurze Przed nowym projektem, dzięki czemu może obsługiwać pliki wrzucane.

Ten artykuł pierwotnie pojawił się w wydaniu magazynu projektanta Web Designer 264. Subskrybuj tutaj .

Czytaj więcej:

  • 15 Naprawdę przydatne responsywne samouczki projektowania stron internetowych
  • Jak zacząć od Sass
  • 7 wskazówek lepiej zarządzać kolorami w sieci

Jak - Najpopularniejsze artykuły

Jak narysować znak w piórze i atramentowi

Jak Feb 9, 2026

Jako artysta w studio gier zapomniałem najbardziej tradycyjnych mediów, ale atrament zawsze zwraca mnie do mnie. Po dniu wpatry..

Utwórz efekt aberracji chromatycznej

Jak Feb 9, 2026

Aberracja chromatyczna (zniekształcenie), znane również jako "Color Fringing" jest wspólnym problemem optycznym. Występuje, ..

Łatwe stwarzające techniki modeli 3D

Jak Feb 9, 2026

Byłem dyrektorem animacji przez ostatnie kilka lat i pracował z wieloma animatorami, pomagając im doskonalić swoje umiejętno..

Naucz się modelować osobę 3D w Zbrush i Maya

Jak Feb 9, 2026

Strona 1 z 2: Strona 1 Strona 1 Strona 2..

Designer powinowactwo: Jak korzystać z eksportu persona

Jak Feb 9, 2026

Projektant powinowactwa jest popularnym narzędziem do edycji wektorów. Jak również wersje Mac i Windows, niedawno wydany Seri..

Jak rzeźbić 3d-drukowane goblin

Jak Feb 9, 2026

Koncepcja tego projektu, Grzyb Goblin, pochodzi z rysunku przez mojego przyjaciela Adriana Smitha. Pracowałem nad tworzeniem tej..

Jak dodać zabawne tła CSS do swoich witryn

Jak Feb 9, 2026

Czas był tłem strony internetowej Był malutki obraz kafelkowy - i często ohydny, napaść o gałki oczne w każdym odwiedzaj�..

Utwórz prysznic meteor w 3DS max

Jak Feb 9, 2026

Jeśli chcesz wykonać prysznic Meteor 3D dla sceny lub projektu, możesz łatwo renderować fotorealistyczne prysznic meteor w d..

Kategorie