Jak skonfigurować tematyce witryny z zmiennymi CSS

Sep 10, 2025
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 rozciągnąć płótno i ustawić do farb olejnych

Jak Sep 10, 2025

(Kredyt obrazu: Getty Images) Witamy w naszym przewodniku, jak rozciągnąć płótno i skonfigurować farby olejne. ..

Adobe XD: Jak korzystać z funkcji Auto-Animate

Jak Sep 10, 2025

(Kredyt obrazu: Adobe) Pomimo późnego wejścia do gry prototypowania, Adobe XD jest jednym z najlepszych i najszybs..

Utwórz niestandardowy bot bot

Jak Sep 10, 2025

(Kredyt obrazu: projektant stron internetowych) Luz jest coraz bardziej popularnym narzędziem dla firm i zespołów,..

Jak wyciągnąć Asukę z Neon Genesis Evangelion

Jak Sep 10, 2025

(Kredyt obrazu: Paul Kwon) Tworzenie projekty znaków. Do życia jest spełnienie marzeń, zwłaszcza ..

Wprowadzenie do testowania Frontend

Jak Sep 10, 2025

Strona 1 z 2: Różne typy testów frontend (i kiedy ich używać) Różn..

Jak zbudować pełnotrawną stronę internetową w kanciasty

Jak Sep 10, 2025

Strona 1 z 4: Strona 1 Strona 1 Strona 2 Strona 3. ..

Najlepszy przewodnik po kompozycji obrazów w Photoshopie

Jak Sep 10, 2025

Ze wszystkich projektów Photoshopa, kompozycja obrazów w jednej fantastycznej ramie jest być może najbardziej przyjemnym i kr..

Provider PRO do tworzenia tekstur 3D

Jak Sep 10, 2025

Pięciu wybitnych artystów wykazuje sztuczki ich handlu, wyjaśniając, jak tworzyć miejskie, sci-fi, naturalne, stylizowane i ..

Kategorie