Cách tạo biến trong css
Đối với một số khai báo CSS, có thể khai báo điều này cao hơn trong tầng và để tính kế thừa CSS giải quyết vấn đề này một cách tự nhiên Show
Đối với các dự án không tầm thường, điều này không phải lúc nào cũng có thể. Bằng cách khai báo một biến trên phần tử giả Biến CSS (chính thức được gọi là thuộc tính tùy chỉnh) là các giá trị do người dùng xác định có thể được đặt một lần và sử dụng nhiều lần trong toàn bộ cơ sở mã của bạn. Chúng giúp việc quản lý màu sắc, phông chữ, kích thước và giá trị hoạt ảnh trở nên dễ dàng hơn và đảm bảo tính nhất quán giữa các ứng dụng web Ví dụ: bạn có thể đặt màu thương hiệu làm thuộc tính CSS ( 7) và sử dụng giá trị này trong bất kỳ thành phần hoặc kiểu nào sử dụng màu thương hiệu của bạn ( 8)Bên cạnh việc cung cấp mã sạch hơn và không lặp lại, các biến CSS có thể được sử dụng để xây dựng và tạo các hệ thống kiểu động Bài đăng này được trích từ hướng dẫn của tôi, CSS Master, hướng dẫn bạn viết CSS tốt hơn, hiệu quả hơn. Bạn cũng sẽ học cách sử dụng thành thạo các công cụ sẽ cải thiện quy trình làm việc của mình và xây dựng các ứng dụng tốt hơn Xác định biến CSSĐể xác định một thuộc tính tùy chỉnh, hãy chọn một tên và thêm hai dấu gạch nối vào trước tên đó. Bất kỳ ký tự chữ và số nào cũng có thể là một phần của tên. Dấu gạch ngang ( 9) và dấu gạch dưới ( 0) cũng được phép. Một loạt các ký tự Unicode có thể là một phần của tên thuộc tính tùy chỉnh. Điều này bao gồm biểu tượng cảm xúc, nhưng để rõ ràng và dễ đọc, hãy sử dụng tên chữ và sốĐây là một ví dụ
_ 1 cho trình phân tích cú pháp CSS biết rằng đây là thuộc tính tùy chỉnh. Khi được sử dụng làm biến, công cụ phân tích cú pháp sẽ thay thế thuộc tính bằng giá trị của nóTên thuộc tính tùy chỉnh phân biệt chữ hoa chữ thường. Điều đó có nghĩa là 2 và 3 được coi là hai tên thuộc tính riêng biệt. Đó là một sự khác biệt so với CSS truyền thống, trong đó trường hợp thuộc tính và giá trị không quan trọng. Tuy nhiên, nó phù hợp với quy tắc đặt tên biến trong ECMAScriptCũng như các thuộc tính khác, chẳng hạn như 4 hoặc 5, thuộc tính tùy chỉnh CSS phải được xác định trong một khối khai báo. Một mẫu phổ biến là xác định các thuộc tính tùy chỉnh bằng cách sử dụng 6 phần tử giả làm bộ chọn
6 là phần tử giả đề cập đến phần tử gốc của tài liệu. Đối với tài liệu HTML, đó là phần tử 8. Đối với tài liệu SVG, đó là phần tử 9. Việc sử dụng 6 làm cho các thuộc tính có sẵn ngay lập tức trong tài liệuSử dụng biến CSSĐể sử dụng thuộc tính tùy chỉnh làm biến, chúng ta cần sử dụng hàm 1. Ví dụ: nếu muốn sử dụng thuộc tính tùy chỉnh 3 của mình làm màu nền, chúng tôi sẽ thực hiện như sau
Giá trị thuộc tính tùy chỉnh của chúng tôi sẽ trở thành giá trị tính toán của thuộc tính 3Cho đến nay, các thuộc tính tùy chỉnh chỉ có thể được sử dụng làm biến để đặt giá trị cho các thuộc tính CSS tiêu chuẩn. Ví dụ: bạn không thể lưu trữ tên thuộc tính dưới dạng biến rồi sử dụng lại tên đó. CSS sau sẽ không hoạt động
Bạn cũng không thể lưu trữ một cặp thuộc tính-giá trị dưới dạng một biến và sử dụng lại nó. Ví dụ sau cũng không hợp lệ
Cuối cùng, bạn không thể nối một biến thành một phần của chuỗi giá trị
Thuộc tính tùy chỉnh CSS so với. Biến CSS“Thuộc tính tùy chỉnh” là một tên gọi trong tương lai giải thích cách tính năng này có thể được sử dụng vào một ngày nào đó. Tuy nhiên, điều này có thể thay đổi nếu thông số kỹ thuật của Tiện ích mở rộng CSS được các nhà cung cấp trình duyệt triển khai. Thông số kỹ thuật đó xác định các cách để mở rộng CSS với các kết hợp, chức năng và quy tắc của bộ chọn tùy chỉnh Chúng tôi thường gọi các thuộc tính tùy chỉnh là "biến" và cho đến nay, đó là cách duy nhất chúng tôi có thể sử dụng chúng. Về lý thuyết, chúng không hoàn toàn là các thuật ngữ có thể hoán đổi cho nhau. Trong thực tế và bây giờ, họ đang. Tôi sẽ chủ yếu sử dụng các thuộc tính tùy chỉnh trong bài đăng này, vì đó là tên riêng của chúng. Tôi sẽ sử dụng biến khi nó làm cho câu rõ ràng hơn Đặt giá trị dự phòngHàm 1 chấp nhận tối đa hai đối số. Đối số đầu tiên phải là tên thuộc tính tùy chỉnh. Đối số thứ hai là tùy chọn, nhưng phải là giá trị khai báo. Giá trị khai báo này hoạt động như một giá trị dự phòng hoặc giá trị mặc định được áp dụng khi giá trị thuộc tính tùy chỉnh không được xác địnhHãy lấy CSS sau
Nếu 5 được xác định—giả sử giá trị của nó là 6 —thì màu tô cho bất kỳ đường dẫn nào có thuộc tính lớp 7 sẽ có màu đỏ cam. Nếu nó không được xác định, vùng tô sẽ có màu xanh da trời đậmCác giá trị khai báo cũng có thể được lồng vào nhau. Nói cách khác, bạn có thể sử dụng một biến làm giá trị dự phòng cho hàm 8
Trong CSS ở trên, nếu 9 được xác định, thì màu nền sẽ được đặt thành giá trị của thuộc tính 9. Nếu không, màu nền sẽ là bất kỳ giá trị nào được chỉ định cho 1. Nếu cả hai giá trị đó đều không được xác định, thì màu nền sẽ là giá trị ban đầu cho thuộc tính—trong trường hợp này, 2Điều tương tự cũng xảy ra khi thuộc tính tùy chỉnh có giá trị không hợp lệ đối với thuộc tính được sử dụng cùng với thuộc tính đó. Hãy xem xét CSS sau
Trong trường hợp này, giá trị của thuộc tính 3 không phải là màu hợp lệ. Thay vào đó, 4 kế thừa màu của nó từ màu của phần tử 5Các thuộc tính tùy chỉnh được giải quyết giống như cách các giá trị CSS khác được giải quyết. Nếu giá trị không hợp lệ hoặc không được xác định, trình phân tích cú pháp CSS sẽ sử dụng giá trị kế thừa nếu thuộc tính có thể kế thừa (chẳng hạn như 6 hoặc 5) và giá trị ban đầu nếu thuộc tính không thể kế thừa (như với 3)Xếp tầng giá trịThuộc tính tùy chỉnh cũng tuân thủ các quy tắc của tầng. Các giá trị của chúng có thể bị ghi đè bởi các quy tắc tiếp theo
Trong ví dụ trên, văn bản nội dung của chúng tôi sẽ có màu xám đậm. Chúng tôi cũng có thể đặt lại các giá trị trên cơ sở mỗi bộ chọn. Hãy thêm một vài quy tắc vào CSS này 0Trong trường hợp này, bất kỳ văn bản nào được bao bọc trong 9 thẻ phần tử sẽ có màu cam. Nhưng văn bản trong 0 hoặc các thành phần khác vẫn có màu xám đậmBạn cũng có thể đặt giá trị của thuộc tính tùy chỉnh bằng cách sử dụng thuộc tính 1—ví dụ: 2Thuộc tính tùy chỉnh và bảng màuThuộc tính tùy chỉnh hoạt động đặc biệt tốt để quản lý bảng màu HSL. HSL là viết tắt của màu sắc, độ bão hòa, độ sáng. Đó là một mô hình màu dựa trên ánh sáng tương tự như RGB. Chúng ta có thể sử dụng các giá trị HSL trong CSS nhờ các hàm màu 3 và 4. Hàm 3 chấp nhận ba đối số. màu sắc, độ bão hòa và độ sáng. Hàm 6 cũng chấp nhận đối số thứ tư, cho biết độ trong suốt alpha của màu (giá trị nằm trong khoảng từ 0 đến 1)Trong khi hệ thống RGB biểu thị màu theo tỷ lệ của màu đỏ, xanh lá cây và xanh lam, thì HSL sử dụng vòng tròn màu trong đó màu sắc là vị trí độ trên vòng tròn đó và tông màu hoặc sắc thái được xác định bằng cách sử dụng các giá trị độ bão hòa và độ sáng. Độ bão hòa có thể nằm trong khoảng từ 0% đến 100%, trong đó 0% là màu xám và 100% là màu đầy đủ. Độ sáng cũng có thể nằm trong khoảng từ 0% đến 100%, trong đó 0% là màu đen, 100% là màu trắng và 50% là màu bình thường Chromatic Wheel của CrazyTerabyte từ Openclipart Trong hệ màu HSL, các màu cơ bản đỏ, lục và lam nằm cách nhau 120 độ ở 0 độ/360 độ, 120 độ và 240 độ. Các màu thứ cấp—lục lam, đỏ tươi và vàng—cũng cách nhau 120 độ, nhưng nằm đối diện với các màu cơ bản, lần lượt ở các góc 180 độ, 300 độ và 60 độ/420 độ. Màu bậc ba, bậc bốn và các màu khác nằm ở khoảng giữa với mức tăng khoảng mười độ. Màu xanh da trời, được viết bằng ký hiệu HSL, sẽ là 7Đơn vị đối số HSLKhi bạn sử dụng một giá trị không có đơn vị cho đối số đầu tiên của các hàm 3 và 4, trình duyệt sẽ cho rằng đó là một góc tính theo đơn vị độ. Tuy nhiên, bạn có thể sử dụng bất kỳ. Màu xanh dương cũng có thể được biểu thị bằng 0, 1 hoặc 2Đây là nơi mà nó được vui vẻ. Chúng tôi có thể đặt các giá trị màu sắc của mình bằng thuộc tính tùy chỉnh và đặt các sắc thái sáng hơn và tối hơn bằng cách điều chỉnh giá trị độ bão hòa và độ sáng 1CSS ở trên cung cấp cho chúng ta bảng màu hiển thị bên dưới Đây là phiên bản đơn giản nhưng bạn cũng có thể sử dụng các thuộc tính tùy chỉnh để điều chỉnh giá trị độ bão hòa và độ sáng Tạo bảng màu mạnh mẽDieter Raber thảo luận về kỹ thuật tạo bảng màu mạnh mẽ trong “ Tạo chủ đề màu với thuộc tính tùy chỉnh, HSL và một chút calc() ” Một ý tưởng khác là kết hợp các thuộc tính tùy chỉnh và hàm 3 để tạo bảng màu vuông từ màu cơ bản. Hãy tạo một bảng màu hình vuông trong ví dụ tiếp theo của chúng tôi. Một bảng màu hình vuông bao gồm bốn màu cách đều nhau trên bánh xe màu—tức là cách nhau 90 độ 2Chút CSS này mang lại cho chúng ta cách phối màu khá lấy cảm hứng từ vùng nhiệt đới được hiển thị bên dưới Thuộc tính tùy chỉnh cũng hoạt động tốt với truy vấn phương tiện, như chúng ta sẽ thấy trong phần sau Sử dụng các biến CSS để tạo bảng Chủ đề tốiBạn có thể sử dụng Thuộc tính tùy chỉnh CSS để xác định các bộ biến cho cả chủ đề tối và sáng trên trang web của mình Lấy ví dụ dưới đây về kiểu trang, chúng ta có thể thay thế tất cả các màu HSL trong các bộ chọn khác nhau bằng các biến sau khi xác định thuộc tính tùy chỉnh cho các màu tương ứng trong 6 3Tên phù hợp cho các thuộc tính tùy chỉnh đã được sử dụng. Ví dụ: 5 chỉ màu của nền điều hướng, trong khi 6 chỉ màu của nền trước/văn bản của điều hướngBây giờ, sao chép bộ chọn 6 với nội dung của nó, nhưng thêm thuộc tính chủ đề có giá trị tối 4Chủ đề này sẽ được kích hoạt nếu thuộc tính chủ đề có giá trị tối được thêm vào phần tử 8Giờ đây, chúng tôi có thể xử lý các giá trị của các biến này theo cách thủ công bằng cách giảm giá trị độ sáng của màu HSL để cung cấp chủ đề tối hoặc chúng tôi có thể sử dụng các kỹ thuật khác như bộ lọc CSS như 9 và 0, thường được sử dụng để điều chỉnh kết xuất Thêm mã sau vào 1 5Bộ lọc 9 đảo ngược tất cả các màu trong các thành phần đã chọn (mọi thành phần trong trường hợp này). Giá trị của đảo ngược có thể được chỉ định theo tỷ lệ phần trăm hoặc số. Giá trị 3 hoặc 4 sẽ đảo ngược hoàn toàn giá trị màu sắc, độ bão hòa và độ sáng của phần tửBộ lọc 0 làm cho một phần tử sáng hơn hoặc tối hơn. Giá trị của 6 dẫn đến phần tử tối hoàn toànBộ lọc 9 làm cho một số thành phần rất sáng. Chúng được giảm bớt bằng cách cài đặt 8Một chủ đề tối với các mức độ tối khác nhau Chuyển đổi chủ đề bằng JavaScriptBây giờ, hãy sử dụng JavaScript để chuyển đổi giữa chủ đề tối và sáng khi người dùng nhấp vào nút Tối/Sáng . Trong HTML của bạn, hãy thêm một dòng 9 trước dấu đóng 0 với mã sau 6Tài liệu. documentElement đề cập đến Phần tử DOM gốc của tài liệu — nghĩa là, 8. Mã này kiểm tra sự tồn tại của một thuộc tính chủ đề bằng cách sử dụng phương thức 2 và thêm thuộc tính có giá trị tối nếu thuộc tính đó không tồn tại, khiến chuyển sang chủ đề tối. Nếu không, nó sẽ xóa thuộc tính, dẫn đến việc chuyển sang chủ đề sángGhi chú. Bạn cũng nên sử dụng tính năng này kết hợp với tính năng bảng màu ưu tiên trong CSS, tính năng này có thể được sử dụng để tự động thay đổi chủ đề sáng/tối từ cài đặt hệ điều hành hoặc tác nhân người dùng (trình duyệt) của người dùng. Điều này được thể hiện trong phần tiếp theo Sử dụng thuộc tính tùy chỉnh và truy vấn phương tiệnChúng tôi cũng có thể sử dụng các thuộc tính tùy chỉnh với các truy vấn phương tiện. Ví dụ: bạn có thể sử dụng các thuộc tính tùy chỉnh để xác định bảng phối màu sáng và tối 7Tương tự, chúng ta có thể sử dụng các thuộc tính tùy chỉnh để thay đổi kích thước phông chữ cơ bản cho màn hình so với bản in 8Trong trường hợp này, chúng tôi đang sử dụng các thiết bị phù hợp với phương tiện để in và màn hình. Đối với cả hai phương tiện, chúng tôi sẽ sử dụng cỡ chữ cơ bản là 10 đơn vị—pixel cho màn hình, điểm cho bản in. Chúng tôi cũng sẽ sử dụng giá trị của 3 để đặt kích thước bắt đầu cho phần tử gốc của chúng tôi ( 4). Sau đó, chúng ta có thể sử dụng 5 đơn vị để định kích thước kiểu chữ của mình so với kích thước phông chữ cơ sởSử dụng Thuộc tính tùy chỉnh với JavaScriptNhớ. thuộc tính tùy chỉnh là thuộc tính CSS và chúng ta có thể tương tác với chúng như vậy. Ví dụ: chúng ta có thể sử dụng API 6 để kiểm tra xem trình duyệt có hỗ trợ các thuộc tính tùy chỉnh hay không 9Chúng tôi cũng có thể sử dụng phương thức 7 để đặt giá trị thuộc tính tùy chỉnh 0Sử dụng 8 hoạt động tương tự. Chỉ cần chuyển tên thuộc tính tùy chỉnh làm đối số 1Để sử dụng thuộc tính tùy chỉnh làm giá trị với JavaScript, hãy sử dụng hàm 1 với tên thuộc tính làm đối số 2Rất tiếc, bạn không thể đặt thuộc tính tùy chỉnh bằng cú pháp dấu ngoặc vuông hoặc thuộc tính camelCased của đối tượng kiểu. Nói cách khác, cả 00 và 01 đều không hoạt độngThuộc tính và thành phần tùy chỉnhCác khung JavaScript như React, Angular và Vue cho phép các nhà phát triển sử dụng JavaScript để tạo các khối HTML có thể chia sẻ, có thể tái sử dụng, thường với CSS được xác định ở cấp thành phần Dưới đây là ví dụ về thành phần React, được viết bằng JSX, một phần mở rộng cú pháp cho JavaScript 3Tìm hiểu thêm về Khung JavaScriptSitePoint có nhiều tài nguyên về React, Angular và Vue nếu bạn muốn tìm hiểu thêm về cách làm việc với các khung JavaScript. Đối với React, hãy xem Tuần đầu tiên của bạn với React và các bài viết mở rộng về React. Đối với góc cạnh, có Tìm hiểu góc cạnh. Tuần đầu tiên của bạn và rất nhiều bài viết và hướng dẫn về Angular. Đối với Vue, hãy xem Jump Start Vue. js và hơn thế nữa bài viết về Vue Thành phần React của chúng tôi nhập CSS vào tệp JavaScript. Khi được biên dịch, nội dung của 02 được tải nội tuyến. Đây là một cách có thể để sử dụng điều này với các thuộc tính tùy chỉnh 4Trong ví dụ này, chúng tôi đã sử dụng thuộc tính tùy chỉnh— 03 —cho màu nền của nút, cùng với màu mặc định trong trường hợp 03 không bao giờ được xác định. Từ đây, chúng ta có thể đặt giá trị là 03, trong biểu định kiểu chung hoặc cục bộ thông qua thuộc tính 1Hãy đặt giá trị dưới dạng React “prop”. Phản ứng đạo cụ (viết tắt của thuộc tính) bắt chước các thuộc tính phần tử. Chúng là một cách để truyền dữ liệu vào thành phần React. Trong trường hợp này, chúng tôi sẽ thêm một giá đỡ có tên 07 5Bây giờ, chúng tôi cần cập nhật 08 để hỗ trợ thay đổi này 6Trong đoạn mã trên, chúng ta đã thêm một đối tượng 09 chứa tên thuộc tính tùy chỉnh của chúng tôi và đặt giá trị của nó thành giá trị của _______11_______07 prop và một thuộc tính 1 cho nút của chúng taViệc sử dụng thuộc tính 1 có thể đi ngược lại với mọi thứ bạn đã được dạy về cách viết CSS. Một điểm hấp dẫn của CSS là chúng ta có thể xác định một bộ kiểu để sử dụng trên nhiều tài liệu HTML và XML. Mặt khác, thuộc tính 1 giới hạn phạm vi của CSS đó đối với phần tử mà nó được áp dụng cho. Chúng tôi không thể sử dụng lại nó. Và chúng ta không thể tận dụng dòng thácNhưng trong kiến trúc giao diện người dùng, dựa trên thành phần, một thành phần có thể được sử dụng trong nhiều ngữ cảnh, bởi nhiều nhóm hoặc thậm chí có thể được chia sẻ giữa các dự án máy khách. Trong những trường hợp đó, bạn có thể muốn kết hợp "phạm vi toàn cầu" của tầng với "phạm vi cục bộ" hẹp do thuộc tính 1 cung cấpĐặt giá trị thuộc tính tùy chỉnh với thuộc tính 1 giới hạn hiệu ứng đối với trường hợp cụ thể này của thành phần 08. Tuy nhiên, vì chúng tôi đã sử dụng thuộc tính tùy chỉnh thay vì thuộc tính CSS tiêu chuẩn nên chúng tôi vẫn có tùy chọn xác định 03 trong biểu định kiểu được liên kết thay vì dưới dạng chỗ dựa thành phầnPhần kết luậnCác thuộc tính tùy chỉnh sử dụng một trong những tính năng tốt nhất của các biến tiền xử lý—biến—và làm cho chúng có nguồn gốc từ CSS. Với các thuộc tính tùy chỉnh, chúng ta có thể
Các biến có nhiều ứng dụng và đặc biệt hữu ích trong các hệ thống thiết kế dựa trên thành phần Tôi hy vọng bây giờ bạn đã hiểu rõ hơn về cách sử dụng biến hoặc thuộc tính tùy chỉnh trong CSS. Hãy xem khóa học của tôi, CSS Master, để mở rộng kiến thức về CSS của bạn và nhận thêm các mẹo hữu ích như thế này Chia sẻ bài viết nàynâu Tiffany Tiffany B. Brown là một nhà phát triển web và nhà văn kỹ thuật tự do có trụ sở tại Los Angeles. Brown cung cấp dịch vụ tư vấn và phát triển web cho các cơ quan lớn hơn và doanh nghiệp nhỏ. Từng là thành viên của nhóm quan hệ nhà phát triển Phần mềm Opera, Brown cũng là đồng tác giả của cuốn sách JumpStart HTML5 của SitePoint. Cô ấy thỉnh thoảng viết về công nghệ phát triển web trên blog của mình. Bạn có thể theo dõi cô ấy trên Twitter tại @webinista Var() trong CSS là gì?var() Hàm var() CSS có thể được sử dụng để chèn giá trị của thuộc tính tùy chỉnh (đôi khi được gọi là "biến CSS") thay vì bất kỳ phần nào của giá trị . .
Làm cách nào để sử dụng biến trong CSS nội tuyến?Để xác định Biến CSS, cần thêm biến đó vào. khai báo gốc nếu nó là toàn cầu (. root tương đương với
Làm cách nào để sử dụng biến JavaScript trong CSS?CSS Thay đổi biến bằng JavaScript . Thay đổi biến bằng JavaScript. 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. . Hỗ trợ trình duyệt. Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng var(). . Hàm CSS var(). Tài sản Làm cách nào để thêm giá trị động trong CSS?Có một số cách khác nhau mà bạn có thể thêm và thao tác với màu động bằng CSS, trong bài viết này, chúng ta sẽ khám phá một số cách. . sử dụng minh bạch. Màu sắc tương đối Sử dụng hàm calc() Lọc giá trị phần trăm Các phương thức bổ sung trong SASS và JavaScript |