Cách thiết lập chủ đề trang web với các biến CSS

Thuộc tính tùy chỉnh CSS, thường được gọi là các biến CSS, hiện được hỗ trợ bởi tất cả các trình duyệt hiện đại chính. Điều này có nghĩa là đối với các dự án không bị gánh nặng bằng cách hỗ trợ các trình duyệt cũ như Internet Explorer, các biến CSS có thể được xem xét - cho tất cả các ý định và mục đích - an toàn để sử dụng.

Nhiều nhà phát triển đã sử dụng các biến với bộ tiền xử lý như Sass hoặc Ít hơn như một phương tiện để giảm sự lặp lại mã. Các biến CSS bản địa hoạt động phần lớn giống như cách tương tự, nhưng không yêu cầu bất kỳ bước xây dựng bổ sung nào, Cascade giống như thuộc tính CSS thông thường và quan trọng nhất là có sẵn trong thời gian chạy. (Để giữ cho trang web của bạn chạy trơn tru, hãy chắc chắn rằng bạn đã chọn quyền web hosting dịch vụ.)

• Sass là gì?

Những lợi ích này mang lại cho các biến CSS bản địa trở thành một lợi thế so với anh chị em tiền xử lý của họ và mở cửa cho các nhà phát triển để thực hiện nhiều điều thú vị với ít mã ít hơn. Quan tâm đến các tùy chọn Mã số 0 cho trang web của bạn? Đây là hướng dẫn của chúng tôi về đầu người tạo ra trang web .

Trong hướng dẫn này, chúng tôi sẽ khám phá cách chúng tôi có thể sử dụng các biến CSS để triển khai trang web vào ứng dụng web Mock có tên là NoteApp. Điều này sẽ liên quan đến việc viết Css. và JavaScript. Để cho phép người dùng thay đổi bảng màu và chuyển đổi lượng cột được hiển thị. Sau đó, chúng tôi sẽ tận dụng API lưu trữ web để đảm bảo bất kỳ thay đổi nào được lưu cho các phiên trong tương lai.

Nhận các tập tin hướng dẫn

Điều đầu tiên trước tiên, tải xuống các tệp dự án từ Filesilo của thiết kế web (Số 264). LƯU Ý: Lần đầu tiên người dùng sẽ phải đăng ký để sử dụng filesilo.

01. Thiết lập không gian làm việc

bên trong / mẫu trang web Thư mục bạn sẽ tìm thấy trang web static NOTApp trong đó chúng tôi sẽ thực hiện theo dõi trang web bằng các biến CSS và API lưu trữ web. Mở thư mục trong trình soạn thảo văn bản ưa thích của bạn.

02. Thiết lập các biến CSS của chúng tôi

Trong main.css. , bạn sẽ tìm thấy nhiều CSS của dự án. Ở trên cùng, tạo một khối nhắm mục tiêu nguồn gốc pseudo-class. Trong đó xác định các biến như trong đoạn trích dưới đây. Khối gốc này chứa các biến toàn cục sẽ nằm trên biểu định kiểu của chúng tôi giống như bất kỳ thuộc tính CSS thông thường nào.

: root {
  --primary: # 2f353e;
  - Công thức: # 2B9BCA;
  - Hoạt động: # F3583F;
  - Tìm hiểu: # e0e1e2;
  --Quary: #ffffff;
} 

03. Thay thế màu sắc bằng biến

Đi qua biểu định kiểu, bằng tay hoặc sử dụng Tìm / Thay thế và trao đổi bất kỳ mã HEX màu tĩnh nào với biến tương ứng của chúng từ khối root. Để làm điều này, sử dụng var. chức năng và vượt qua tên của biến. Điều này cho biết trình duyệt tham chiếu giá trị của biến đó. Ví dụ:

 .c-tiêu đề {
  Màu nền: var (- chính);
  Màu sắc: var (- QUITary);
} 

04. Xác định vị trí SVG nội tuyến cho các biểu tượng

Mở index.html. Và một trong những điều đầu tiên bạn nhận thấy là một yếu tố SVG lớn. Điều này chứa các đường dẫn cho tất cả các biểu tượng của trang, mỗi biểu tượng được bọc trong phần tử ký hiệu và đưa ra một ID duy nhất. Những biểu tượng này sau đó được tham chiếu khi cần thiết với sử dụng Yếu tố, cho phép tái sử dụng các biểu tượng mà không sao chép mã SVG.

05. Thêm các biến CSS vào SVG

Một lợi ích của việc sử dụng SVG nội tuyến thay vì tệp .svg là CSS có thể truy cập cấu trúc bên trong của nó. Điều này có nghĩa là các biến CSS của chúng tôi có thể (Kiểm tra hỗ trợ trình duyệt đây ). Trong index.html. , Thay thế khối kiểu của SVG bằng đoạn trích dưới đây. Bây giờ mỗi màu của SVG được liên kết với các giá trị của các biến CSS của chúng tôi.

 & lt; phong cách & gt;
  .sơ cấp {
  Điền: var (-promary, # 2f353e);
  Không thể
  .thứ hai {
  Điền: var (-secondary, # 2b9bca);
  Không thể
& lt; / style & gt; 

06. Tạo một biến cột

Chúng ta cũng có thể sử dụng các biến CSS cho các thuộc tính khác với màu sắc. Tạo một biến mới trong khối gốc, hãy gọi nó cột và cho nó một giá trị 3. Điều này sẽ phù hợp với giá trị mặc định của Cột Thành phần UI trên trang. Khi chức năng, thành phần này sẽ chuyển đổi số lượng cột.

: root {
  --primary: # 2f353e;
  - Công thức: # 2B9BCA;
  - Hoạt động: # F3583F;
  - Tìm hiểu: # e0e1e2;
  --Quary: #ffffff;
  - Màu sắc: 3;
} 

07. Triển khai một cột Chuyển đổi

Sử dụng biến cột mới của chúng tôi và Calc () Chức năng, giờ đây chúng ta sẽ tính toán mức độ rộng của từng thành phần ghi chú để tạo đúng số cột. Ví dụ: nếu các cột được đặt thành 4, mỗi ghi chú phải có chiều rộng 25%.

 .c-note {
  Chiều rộng: Calc (100% / var (- cột));
} 

08. Thêm các lớp JS và thuộc tính dữ liệu

Khi áp dụng hành vi JS vào phần tử DOM, móc vào đó thông qua một lớp có tiền tố JS. Điều này làm bạn hài lòng các khía cạnh chức năng của một yếu tố từ các phần mềm của CSS. Hãy thêm một JS-Update-Biến lớp đến tất cả các đầu vào màu sắc và radio cũng như một Thuộc tính dữ liệu tham khảo biến tương ứng để cập nhật.

 & lt; loại đầu vào = "màu" giá trị = "# 2f353e"
Class = "JS-Update-Biến-ẩn-ẩn-trực quan"
biến dữ liệu = "chính" & gt; 

09. Thêm JS để cập nhật các biến CSS

Mở main.js. và thêm đoạn trích dưới đây. Vòng lặp này thông qua tất cả chúng ta JS-Update-Biến Đầu vào và thêm logic, vì vậy thay đổi, biến được tham chiếu trong thuộc tính biến dữ liệu của nó được cập nhật với giá trị đầu vào. Các swatches màu và chuyển đổi cột bây giờ sẽ hoạt động!

 var vartrig = Tài liệu
.QuerySelectorall (". JS-Update-biến");
cho (var i = 0; i & lt; vartrig.length; i ++) {
Vartrig [i]
.addeventlistener ("Thay đổi", hàm () {
Tài liệu.documentelement.style.
.setproperty ("-" + this.dataset.variable,
giá trị này);
});
} 

10. Đính kèm một lớp JS vào nút Lưu

Nó có ý nghĩa khi chỉ lưu sơ đồ màu của người dùng khi họ nhấp vào nút Lưu, vì điều đó cho phép họ thử nghiệm các chủ đề nhiều như họ muốn mà không tự động ghi đè hiện tại. Để bắt đầu, thêm .js-tiết kiệm màu sắc đến Tiết kiệm nút để hoạt động như hook js của chúng tôi.

 & lt; nút class = "nút c-save-save-Colors"
Dữ liệu-Modal = "JS-Modal" Data-Modal
-Content = "JS-Color-Modal-Nội dung" & GT;
Lưu & LT; / Nút & GT; 

11. Tạo mảng màu sắc

Trở lại main.js. , tuyên bố một biến mới được gọi là màu sắc Và gán cho nó một mảng mới chứa tất cả các biến màu mà chúng ta muốn được lưu sau khi nút Lưu đã được nhấp vào.

 var màu = [
  "sơ cấp",
  "thứ hai",
  "Thứ ba",
  "Đệ tứ",
  "Quất"
]; 

12. Xây dựng nút Lưu Trình nghe sự kiện

Bên dưới mảng màu, tạo trình lắng nghe sự kiện nhấp chuột cho JS-Save-Colors Lớp mà chúng tôi đã thêm vào nút Lưu. Bên trong nó tạo một biến mới được gọi là htmlstyles. và gán cho nó các thuộc tính được tính toán của phần tử HTML gốc. Chúng tôi sẽ sử dụng điều này để truy cập các biến CSS của chúng tôi.

 Tài liệu.QuerySelector (". JS-Save-Colors")
.addeventlistener ("nhấp", hàm () {
var htmlstyles = window
.getComputedStyle (TÀI LIỆU.
.QuerySelector ("HTML")),
}), 

13. Ghi biến màu CSS

Tiếp theo, trong trình nghe sự kiện, tạo một biến mới được gọi là colourstosave. và gán cho nó một đối tượng trống. Tiếp theo, tạo một Cho vòng lặp bằng cách sử dụng. màu sắc mảng từ bước 11. Trong đó, chúng tôi sẽ thêm một bản ghi khóa / giá trị hoàn chỉnh của các biến được đề cập trong màu sắc mảng đến colourstosave. vật.

 mảng vào đối tượng 'colourstosave'.
Colourstosave = đối tượng mới;
cho (var i = 0; i & lt; colours.length; i ++) {
Colourstosave [màu sắc [i]] = htmlstyles
.getPropertyValue ("-" + màu [i]);
} 

14. Gửi ColourStosave đến LocalStorage

Bây giờ chúng ta có tất cả các biến màu được lưu trong colourstosave. , Chúng tôi sẽ gửi nó đến một thành phần của API lưu trữ web có tên là LocalStorage. Đây thực chất là một đối tượng vẫn tồn tại trong các phiên. Chúng tôi có thể lưu trữ các đối tượng khác trong đó bằng cách sử dụng thiết lập các mục() phương pháp. Hãy gửi nó colourstosave. vật.

 localstorage.setitem ("màu",
Json.stringify (colourstosave)); 

15. Thêm một lớp JS vào cột

Ngoài các màu sắc, chúng tôi cũng muốn đảm bảo rằng số cột được chọn của chúng tôi cũng vẫn tồn tại trên các phiên. Bước đầu tiên đối với điều này sẽ là thêm Cột JS-Update đến tất cả các đầu vào radio trong thành phần Cột.

 & lt; Nhập loại = "radio" Tên = "Cột" Lớp
= "JS-Update-biến-Cột-Cập nhật-Cột
U-hidden-allal "value =" 1 "
biến dữ liệu = "Cột" & gt; 

16. Gửi cột đến localStorage

Cho mỗi Cột JS-Update , chúng tôi sẽ chỉ định người nghe sự kiện để xem các thay đổi. Khi phát hiện, sau đó chúng ta sẽ gửi giá trị hiện tại của cột biến thành. lưu trữ cục bộ , một lần nữa sử dụng nó thiết lập các mục() phương pháp. Không giống như với màu sắc, chúng ta không cần phải phân trang giá trị này vì nó không phải là một đối tượng.

 var colinputs = tài liệu
.QuerySelectorall (". JS-Update-Cột");
cho (var i = 0; i & lt; colinputs; i ++) {
colinputs [i] .addeventlistener ("thay đổi",
Hàm () {var htmlstyles = window
.getComputedStyle (TÀI LIỆU.
.QuerySelector ("HTML"));
localstorage.setitem ("Cột",
htmlstyles.getPropertyValue ("- cột"));
});} 

17. Xử lý các phiên mới

Nếu người dùng trả về sau khi chọn tùy chọn màu và cột, chúng ta cần xây dựng logic để dữ liệu đã lưu này được bật trở lại các biến CSS. Bước đầu tiên là xác định một DomcontentLoaded. người nghe sự kiện, và sau đó là một nếu tuyên bố để kiểm tra bất kỳ dữ liệu đã lưu trong localStorage bằng cách sử dụng getItem () phương pháp.

 tài liệu.addeventlistener
("DomcontentLoaded", hàm () {
if (localstorage.getitem ("màu")) {
Không thể
if (localstorage.getitem ("cột")) {
Không thể
}); 

18. Sửa đổi biến màu

Trong màu sắc nếu tuyên bố, tạo một biến mới được gọi là Savedcolours. và gán nó giá trị của một đối tượng màu được phân tích cú pháp từ lưu trữ cục bộ . Sử dụng một TẠI vòng lặp với Savedcolours. , Lấy từng cặp khóa / giá trị màu và nối nó vào phần tử HTML gốc dưới dạng biến CSS.

 var savedcolours = json.parse
(localstorage.getitem ("màu"));
cho (màu trong savedcolours) {
Tài liệu.DocumentEuity.Style.setProperty.
("-" + màu, savedcolours [màu]); } 

19. Thu thập dữ liệu biến cột

Trước khi chúng ta có thể sửa đổi biến cột, trước tiên chúng ta phải lấy các tham chiếu đến dữ liệu đã lưu trong lưu trữ cục bộ và cũng là đầu vào radio trong Cột thành phần. Sau này là để chúng tôi có thể cập nhật trạng thái của nó để đảm bảo số chính xác được chọn trước.

 var cột = localStorage
.getitem ("Cột"),
Casttrairgers = Tài liệu.
Queryselectorall (". JS-Update-Cột"); 

20. Sửa đổi biến và trạng thái

Cuối cùng, chúng tôi sẽ cập nhật biến CSS Cột với đã lưu lưu trữ cục bộ đối tác và đặt thuộc tính đã kiểm tra của đầu vào radio có liên quan trong Cột thành phần để đúng. Các Cột - 1. là để bù đắp cho thực tế là các cột NodeList. là dựa trên không.

 tài liệu.documentelement.style
.setProperty ("- cột", cột);
Casttrairgers [Cột - 1] .Checked = TRUE; 

21. Kiểm tra thành phẩm

Đó là nó! Tất cả mọi thứ trên trang NOCK NOTApp sẽ hoạt động. Bạn có thể tạo sơ đồ màu của riêng mình bằng cách nhấp vào Swatches và sau đó cam kết với lưu trữ cục bộ thông qua nút Lưu. Nếu bạn muốn chuyển đổi lượng cột được hiển thị, hãy nhấp vào số thích hợp trong thành phần Cột.

Và hãy nhớ rằng, nó luôn luôn có giá trị nâng cấp của bạn lưu trữ đám mây Trước một dự án mới để nó có thể xử lý các tập tin bạn ném vào nó.

Bài viết này ban đầu xuất hiện trong tạp chí Web Designer Vấn đề 264. Đăng ký tại đây .

Đọc thêm:

• 15 Hướng dẫn thiết kế web đáp ứng thực sự hữu ích
• Làm thế nào để bắt đầu với sass
• 7 mẹo để quản lý màu sắc tốt hơn trên web