Các biến CSS có được sử dụng không?
Nếu bạn biết một chút về CSS, rất có thể bạn đã nghe nói về các bộ tiền xử lý CSS như Sass và Less. Bạn có thể đã sử dụng chúng trong các dự án của mình bất kể khuôn khổ lựa chọn giao diện người dùng của bạn là gì. Hoặc có thể bạn chưa sử dụng và bạn chỉ sử dụng CSS cũ đơn giản Show
Dù bằng cách nào, điểm bán hàng chính của các bộ tiền xử lý đó là bạn có thể sử dụng các biến giống như trong ngôn ngữ lập trình. Bạn khai báo một biến, gán cho nó một giá trị và sử dụng nó trên toàn bộ tài liệu để dễ dàng bảo trì Trong hướng dẫn này, chúng tôi sẽ giới thiệu sơ lược về khái niệm này bằng cách trước tiên làm sáng tỏ các biến CSS và sau đó xây dựng hai dự án đơn giản sử dụng nó. Nếu muốn bắt tay vào hành động càng sớm càng tốt, bạn có thể tìm mã của cả hai dự án trên CodePen ( tại đây và here). Cần có một số kiến thức CSS cơ bản để làm theo hướng dẫn này. Không có gì khó chịu, hãy đi sâu vào Những gì chúng ta sẽ xây dựngĐể củng cố kiến thức của chúng ta về các biến CSS, chúng ta sẽ xây dựng hai dự án rất đơn giản. Phần đầu tiên sẽ trình bày cách tạo các biến thể của nút. Khái niệm này phổ biến trong Bootstrap, nơi các thành phần nhất định chia sẻ các quy tắc CSS cung cấp cho chúng một thiết kế mặc định nhưng được phân biệt bằng màu sắc hoặc các thuộc tính khác. Dự án thứ hai sẽ là thiết kế dựa trên chủ đề — cụ thể là chủ đề sáng và tối do JavaScript điều khiển Cách sử dụng các biến CSSCòn được gọi là thuộc tính tùy chỉnh hoặc biến xếp tầng, biến CSS có các trường hợp sử dụng bí ẩn. Một trong những cách phổ biến nhất là quản lý các trang web trong đó có nhiều giá trị tương tự như trong tài liệu. Điều này giúp giảm ma sát liên quan đến việc tái cấu trúc hoặc cập nhật mã của bạn Những thứ cơ bảnĐể khai báo một biến trong CSS, hãy đặt tên cho biến, sau đó thêm hai dấu gạch ngang (–) làm tiền tố element { --bg-color: #405580; } body { background-color: var(--bg-color); }7 ở đây đề cập đến bất kỳ phần tử HTML hợp lệ nào có quyền truy cập vào tệp CSS này Tên biến là body { background-color: var(--bg-color); }8 và hai dấu gạch nối được thêm vào. Để truy cập một biến, hãy sử dụng ký hiệu body { background-color: var(--bg-color); }9 và nhập tên biến body { background-color: var(--bg-color); } :root { --primary-color: #0076c6; --blur: 10px; }0 sẽ lấy giá trị của body { background-color: var(--bg-color); }8 mà chúng ta đã khai báo trước đó. Thông thường, các nhà phát triển khai báo tất cả các biến của họ trong phần tử :root { --primary-color: #0076c6; --blur: 10px; }2 của tài liệu :root { --primary-color: #0076c6; --blur: 10px; } Khai báo các biến của bạn ở đây sẽ hiển thị chúng trong phạm vi toàn cầu và có sẵn cho toàn bộ tệp Kế thừa biến CSSCũng giống như CSS truyền thống, các biến CSS về bản chất là xếp tầng — tôi. e. , họ kế thừa. Giá trị của phần tử được kế thừa từ phần tử gốc nếu không có thuộc tính tùy chỉnh nào được xác định HTML
CSS body { background-color: var(--bg-color); }0 Phần đệm của các lớp :root { --primary-color: #0076c6; --blur: 10px; }3 và :root { --primary-color: #0076c6; --blur: 10px; }4 sẽ khác nhau vì theo mặc định, bộ chọn mục tiêu sẽ kế thừa từ lớp cha gần nhất của nó. Trong trường hợp này, bộ chọn :root { --primary-color: #0076c6; --blur: 10px; }4 kế thừa giá trị đệm từ cha trực tiếp của nó, :root { --primary-color: #0076c6; --blur: 10px; }6, với giá trị là :root { --primary-color: #0076c6; --blur: 10px; }7 thay vì :root { --primary-color: #0076c6; --blur: 10px; }8 Giá trị dự phòng và không hợp lệKhi sử dụng thuộc tính tùy chỉnh, bạn có thể tham chiếu thuộc tính tùy chỉnh không được xác định trong tài liệu. Bạn có thể chỉ định một giá trị dự phòng sẽ được sử dụng thay cho giá trị đó. Cú pháp cung cấp giá trị dự phòng vẫn là ký hiệu body { background-color: var(--bg-color); }9. Thêm danh sách các giá trị được phân tách bằng dấu phẩy sau giá trị đầu tiên. Mọi thứ sau dấu phẩy đầu tiên được coi là giá trị dự phòng Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơnTìm hiểu thêm →body { background-color: var(--bg-color); }8 Bạn có nhận thấy rằng tôi viết sai chính tả giá trị 0 không? . Nếu vì lý do nào đó, nó không thể tìm thấy giá trị dự phòng, thì giá trị tiếp theo sẽ bắt đầu, v.v. Trình duyệt sẽ sử dụng màu mặc định ban đầu nếu không tìm thấy bất kỳ giá trị nào được cung cấp Một trường hợp sử dụng khác cho giá trị dự phòng là khi giá trị không hợp lệ đối với thuộc tính được cung cấp body { background-color: var(--bg-color); }0 Trong đoạn mã này, thuộc tính tùy chỉnh 1 được xác định với giá trị là 2, điều này không sai về mặt kỹ thuật. Nhưng khi trình duyệt thay thế giá trị của 3 bằng 4, trình duyệt sẽ cố gắng sử dụng giá trị của 2, đây không phải là giá trị thuộc tính hợp lệ cho màu trong CSS Trình duyệt coi nó là một giá trị không hợp lệ và kiểm tra xem thuộc tính màu có được kế thừa bởi phần tử cha hay không. Nếu có, nó sử dụng nó. Mặt khác, nó sẽ trở lại màu mặc định (màu đen trong hầu hết các trình duyệt) Bây giờ hãy đi sâu vào dự án đầu tiên của chúng tôi Dự án 1. Xây dựng một biến thể nútTrong các khung CSS như Bootstrap, các biến giúp chia sẻ thiết kế cơ sở giữa các phần tử dễ dàng hơn nhiều. Tham gia lớp 6, biến màu nền của một phần tử thành màu đỏ và màu của chính nó thành màu trắng. Trong dự án đầu tiên này, bạn sẽ xây dựng một cái gì đó tương tự Bắt đầu bằng cách tạo một thư mục dự án. Trong thiết bị đầu cuối của bạn, bạn có thể chạy các lệnh này lần lượt Các bài viết hay khác từ LogRocket
body { background-color: var(--bg-color); }7 Thao tác này sẽ tạo một thư mục dự án có tên là 7. Thư mục này sẽ chứa hai dự án mà bạn sẽ xây dựng. Tiếp theo, tạo một thư mục con có tên là 8 và hai tệp cho dự án đầu tiên Dán đoạn mã sau vào tệp 9 bạn đã tạo body { background-color: var(--bg-color); }1 Cấu trúc của đánh dấu này là khá chuẩn. Lưu ý cách mỗi phần tử nút có hai lớp. lớp body { background-color: var(--bg-color); }00 và lớp thứ hai. Trong trường hợp này, chúng ta sẽ gọi lớp body { background-color: var(--bg-color); }00 là lớp cơ sở và lớp thứ hai là lớp bổ trợ Dán đoạn mã này vào tệp body { background-color: var(--bg-color); }02 của bạn body { background-color: var(--bg-color); }5 Lớp body { background-color: var(--bg-color); }00 chứa các kiểu cơ sở cho tất cả các nút và các biến thể xuất hiện trong đó các lớp công cụ sửa đổi riêng lẻ có quyền truy cập vào màu của chúng, được xác định ở cấp độ :root { --primary-color: #0076c6; --blur: 10px; }2 của tài liệu. Điều này cực kỳ hữu ích không chỉ cho các nút mà còn cho các thành phần khác trong HTML của bạn có thể kế thừa các thuộc tính tùy chỉnh Ví dụ: nếu ngày mai bạn quyết định giá trị cho thuộc tính tùy chỉnh body { background-color: var(--bg-color); }05 quá buồn tẻ đối với màu đỏ, bạn có thể dễ dàng chuyển nó lên thành body { background-color: var(--bg-color); }06 và thế là xong. tất cả các yếu tố sử dụng thuộc tính tùy chỉnh này được cập nhật với một thay đổi duy nhất. Tôi không biết về bạn, nhưng điều đó nghe giống như một liều thuốc giảm căng thẳng đối với tôi Đây là dự án đầu tiên của bạn sẽ trông như thế nào dự án 2. Xây dựng chủ đề trên toàn trang webTrong dự án thứ hai, chúng tôi sẽ xây dựng chủ đề sáng và tối. Chủ đề sáng sẽ có hiệu lực theo mặc định trừ khi người dùng đã đặt hệ thống của họ thành chủ đề tối. Trên trang, chúng tôi sẽ tạo một nút chuyển đổi cho phép người dùng chuyển đổi giữa các chủ đề Mở thư mục 7 bạn đã tạo trước đó. Bên trong thư mục, tạo một thư mục khác cho dự án thứ hai của bạn và đặt tên là body { background-color: var(--bg-color); }08. Hoặc, bạn có thể sử dụng lệnh này body { background-color: var(--bg-color); }0 Tiếp theo, di chuyển vào thư mục theo chủ đề body { background-color: var(--bg-color); }1 Tạo ba tệp mới body { background-color: var(--bg-color); }2 Phần này liên quan đến một chút JavaScript. Trước tiên, hãy mở body { background-color: var(--bg-color); }09 của bạn và dán phần đánh dấu sau body { background-color: var(--bg-color); }3 Đoạn mã này đại diện cho một trang blog đơn giản có tiêu đề, nút chuyển đổi chủ đề, bài viết giả và liên kết đến cả tệp CSS và JavaScript tương ứng Bây giờ, hãy mở tệp body { background-color: var(--bg-color); }80 và dán đoạn mã sau vào body { background-color: var(--bg-color); }4 Đoạn trích này có thể được chia thành hai phần chính. phần bố cục và phần thuộc tính tùy chỉnh. Cái sau là những gì bạn nên tập trung vào. Như bạn có thể thấy, các biến được áp dụng ở trên trong các phần tử liên kết, đoạn văn, tiêu đề và bài viết Ý tưởng đằng sau cách tiếp cận này là theo mặc định, trang web sử dụng chủ đề sáng và khi hộp được chọn, các giá trị cho chủ đề sáng sẽ được đảo ngược thành một biến thể tối Vì bạn không thể kích hoạt các thay đổi trên toàn trang web này thông qua CSS, nên JavaScript rất quan trọng ở đây. Trong phần tiếp theo, chúng ta sẽ kết nối mã JavaScript cần thiết để chuyển đổi giữa các chủ đề sáng và tối Ngoài ra, bạn có thể kích hoạt thay đổi tự động thông qua CSS bằng cách sử dụng truy vấn phương tiện body { background-color: var(--bg-color); }81 để phát hiện xem người dùng đã yêu cầu chủ đề sáng hay tối. Nói cách khác, bạn có thể trực tiếp cập nhật trang web để sử dụng các biến thể tối của chủ đề sáng Thêm đoạn mã sau vào tất cả mã CSS bạn vừa viết body { background-color: var(--bg-color); }5 Chúng tôi đang lắng nghe cài đặt thiết bị của người dùng và điều chỉnh chủ đề thành màu tối nếu họ đang sử dụng chủ đề tối Cập nhật tệp body { background-color: var(--bg-color); }82 bằng cách thêm đoạn mã này body { background-color: var(--bg-color); }6 Bây giờ hãy chia nhỏ trạng thái hiện tại của trang web Một người dùng truy cập trang. Truy vấn phương tiện body { background-color: var(--bg-color); }81 xác định xem người dùng đang sử dụng chủ đề sáng hay tối. Nếu đó là chủ đề tối, thì trang web sẽ cập nhật để sử dụng các biến thể tối của thuộc tính tùy chỉnh. Giả sử một người dùng không sử dụng giao diện tối hoặc hệ điều hành của họ không hỗ trợ giao diện tối. Trình duyệt sẽ mặc định là chủ đề sáng, cho phép người dùng kiểm soát hành vi đó bằng cách chọn hoặc bỏ chọn hộp Tùy thuộc vào việc hộp được chọn hay bỏ chọn, hàm body { background-color: var(--bg-color); }84 được gọi để chuyển vào biến thể chủ đề và lưu lựa chọn hiện tại của người dùng vào bộ nhớ cục bộ. Bạn sẽ thấy lý do tại sao nó được lưu trong một phút Hàm body { background-color: var(--bg-color); }84 là nơi tất cả điều kỳ diệu xảy ra. Dựa trên biến thể chủ đề đã thông qua, việc tra cứu được thực hiện trên hằng số body { background-color: var(--bg-color); }86 và được sử dụng để chuyển đổi giữa chế độ sáng và tối Phần cuối cùng của câu đố là duy trì chủ đề hiện tại, điều này đạt được bằng cách đọc chủ đề ưa thích cuối cùng từ bộ nhớ cục bộ và tự động đặt chủ đề đó khi người dùng truy cập lại trang web Bạn có thể nghĩ ra hàng triệu cách khác để đạt được điều này. Vui lòng xem qua mã và thực hiện nhiều thay đổi nếu bạn thấy phù hợp Đây là dự án thứ hai của bạn sẽ trông như thế nào Phần kết luậnBằng cách xây dựng các dự án đơn giản này, bạn có thể học cách sử dụng các biến CSS như một chuyên gia. Chắc chắn có nhiều điều về chúng hơn tôi đã giải thích, vì vậy hãy thoải mái loay hoay với mã để khám phá thêm Các biến CSS giúp đơn giản hóa cách bạn xây dựng trang web và hoạt ảnh phức tạp trong khi vẫn cho phép bạn viết mã có thể tái sử dụng và thanh lịch. Để tìm hiểu thêm, hãy tham khảo tài liệu về MDN Giao diện người dùng của bạn có ngốn CPU của người dùng không?Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket. https. // tên lửa. com/đăng ký/LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi lại các yêu cầu mạng và tự động hiển thị tất cả các lỗi Tôi nên sử dụng biến CSS hay Sass?Ưu điểm của biến CSS là không cần bàn cãi . Chúng có thể được chuyển đổi và ghi đè trong khi các biến SCSS không thể. Các biến CSS đơn giản hóa việc tạo các trang web dựa trên chủ đề màu sắc như thế này ngay tại đây.
Các biến CSS có được hỗ trợ trên tất cả các trình duyệt không?Các biến CSS hiện được hỗ trợ cho 93 phần trăm người dùng trên toàn cầu . Nếu một trình duyệt không hỗ trợ các biến CSS, nó cũng không hiểu hàm var() và không biết đối số thứ hai của nó có nghĩa là gì. Thay vào đó, chúng tôi cần sử dụng tầng, giống như cách chúng tôi làm với mọi tính năng CSS mới.
Tôi có thể sử dụng các biến CSS trong JavaScript không?Các biến CSS có quyền truy cập vào DOM, nghĩa là bạn có thể thay đổi chúng bằng JavaScript .
Các biến CSS có được kế thừa không?Kế thừa với các biến CSS
. Xem xét ví dụ sau. HTML. child elements inherit the CSS variable values of their parent elements (as long as the parent value is not overwritten in the child element). Consider the following example: HTML. |