Hầu hết các trang web đều sử dụng CSS để tinh chỉnh giao diện của các thành phần khác nhau của trang web. CSS, hay Cascading Style Sheet, về mặt kỹ thuật không phải là ngôn ngữ lập trình. Tuy nhiên, CSS có thể được sử dụng với các ngôn ngữ lập trình như JavaScript để tạo các trang web có tính phản hồi và tương tác.
Nếu đã sử dụng các ngôn ngữ lập trình như JavaScript, bạn biết rằng bạn có thể khai báo một biến, gán giá trị cho nó và sử dụng lại biến đó trong các phần khác nhau của mã. Tin vui là bạn có thể áp dụng khái niệm tương tự trong CSS.
Trong bài viết này, chúng tôi sẽ định nghĩa các biến CSS, mô tả lợi ích của chúng và hướng dẫn bạn cách khai báo và sử dụng các biến trong CSS.
Biến trong CSS là gì?
Biến CSS là thuộc tính tùy chỉnh cho phép nhà phát triển web lưu trữ các giá trị mà họ có thể sử dụng lại trong biểu định kiểu. Ví dụ: bạn có thể khai báo kiểu phông chữ, màu nền và kích thước phông chữ mà bạn có thể sử dụng lại với các thành phần như tiêu đề, đoạn văn và div trong cơ sở mã của mình.
Tại sao nên sử dụng biến CSS? Dưới đây là một số lý do;
- Giúp cập nhật mã dễ dàng: sau khi khai báo một biến, bạn có thể sử dụng lại toàn bộ biểu định kiểu mà không cần phải cập nhật từng phần tử theo cách thủ công.
- Giảm sự lặp lại: khi cơ sở mã của bạn phát triển, bạn sẽ thấy rằng mình có các lớp và mục tương tự. Thay vì viết mã CSS cho từng thành phần, bạn chỉ có thể sử dụng các biến CSS.
- Làm cho mã của bạn dễ bảo trì hơn: Việc bảo trì mã rất quan trọng nếu bạn muốn doanh nghiệp của mình hoạt động.
- Cải thiện khả năng đọc: thế giới hiện đại khuyến khích sự hợp tác. Việc sử dụng các biến trong CSS sẽ tạo ra một cơ sở mã nhỏ gọn có thể đọc được.
- Dễ dàng duy trì tính nhất quán: Các biến CSS có thể giúp bạn duy trì kiểu nhất quán khi mã nguồn của bạn phát triển hoặc ứng dụng của bạn tăng kích thước. Ví dụ: bạn có thể khai báo lề, phần đệm, kiểu phông chữ và màu sắc sẽ được sử dụng trong các nút trên toàn bộ trang web của mình.
Cách khai báo biến trong CSS
Vì bạn biết các biến trong CSS là gì và tại sao bạn nên sử dụng chúng, chúng ta có thể tiếp tục và minh họa cách khai báo chúng.
Để khai báo một biến CSS, hãy bắt đầu bằng tên của phần tử, sau đó nhập hai dấu gạch ngang (-), tên bạn muốn và giá trị. Cú pháp cơ bản là;
element {
--variable-name: value;
}Ví dụ: nếu bạn muốn áp dụng phần điền trong toàn bộ tài liệu, bạn có thể khai báo nó là;
body {
--padding: 1rem;
}Phạm vi của các biến trong CSS
Các biến CSS có thể là cục bộ (có sẵn trong một phần tử cụ thể) hoặc toàn cục (có sẵn trong toàn bộ biểu định kiểu).
Biến cục bộ
Các biến cục bộ được thêm vào các bộ chọn được chỉ định. Ví dụ: bạn có thể thêm chúng vào một nút. Đây là một ví dụ;
.button {
--button-bg-color: #33ff4e;
}Biến màu nền có sẵn trong bộ chọn nút và các phần tử con của nó.
Biến toàn cục
Sau khi được khai báo, bạn có thể sử dụng các biến toàn cục với bất kỳ thứ gì trong mã của mình. Chúng ta sử dụng lớp giả :root để khai báo các biến toàn cục. Đây là cách chúng tôi khai báo chúng;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
}Trong đoạn mã trên, bạn có thể sử dụng bất kỳ biến nào được khai báo với các phần tử khác nhau như tiêu đề, đoạn văn, phần tử div hoặc thậm chí toàn bộ nội dung.
Cách sử dụng biến trong CSS
Chúng tôi sẽ tạo một dự án cho mục đích demo và thêm các tệp index.html và styles.css.
Trong tệp index.html, chúng ta có thể có một div đơn giản với hai tiêu đề (h1 và h2) và một đoạn văn (p).
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div>
Trong tệp style.css, chúng ta có thể có những thứ sau;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
--font-size: 16px;
--font-style: italic;
}
body {
background-color: var(--primary-color);
font-size: var(--font-size);
}
h1 {
color: var(--secondary-color);
font-style: var(--font-style)
}
h2 {
font-weight: var(--font-weight)
}
p {
font-size: calc(var(--font-size) * 1.2);
}Khi trang web được hiển thị, chúng ta sẽ có thông tin sau;
Từ đoạn mã trên, chúng ta đã khai báo các biến toàn cục trong phần tử :root. Chúng ta cần sử dụng từ khóa var để sử dụng biến toàn cục trong bất kỳ phần tử nào của chúng ta. Ví dụ: để áp dụng màu nền mà chúng tôi đã khai báo là biến toàn cục, chúng tôi biểu thị mã của mình như sau;
màu nền: var(–base-color);
Hãy kiểm tra mọi thứ khác và bạn sẽ nhận thấy xu hướng sử dụng từ khóa var.
Sử dụng các biến CSS với JavaScript
Chúng tôi sẽ sử dụng các biến cục bộ và toàn cục để minh họa cách sử dụng biến CSS với JavaScript.
Chúng tôi có thể thêm phần tử cảnh báo vào mã hiện có của mình;
nhấp vào đây!
Tài liệu index.html mới của chúng tôi sẽ trông như thế này;
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div> <div class="alert">Click me!</div>
Chúng ta có thể tạo kiểu cho biến của mình. Thêm mã sau vào mã CSS hiện có;
.alert {
--bg-color: red; /* Define local variable */
background-color: var(--bg-color); /* Use the local variable for the background color */
padding: 10px 20px;
border-radius: 4px;
font-weight: var(--font-weight); /*Use the global variable for font weight*/
width: 50px;
}Chúng tôi đã làm như sau;
- Một biến cục bộ được xác định bên trong phần tử cảnh báo;
–bg-color: màu đỏ
- Anh ấy đã sử dụng từ khóa var để truy cập biến cục bộ này;
màu nền: var(-bg-color);
- Chúng tôi đã sử dụng biến toàn cục mà chúng tôi đã khai báo trước đó làm trọng lượng phông chữ của mình;
độ dày phông chữ: var(-font-weight);
Thêm mã JavaScript
Chúng tôi có thể làm cho phần tử cảnh báo của mình phản hồi nhanh; khi bạn nhấp vào nó, bạn sẽ nhận được một cửa sổ bật lên trong trình duyệt có nội dung; “Chúng tôi đã sử dụng các biến CSS từ JavaScript!!!!”.
Chúng ta có thể thêm JavaScript trực tiếp vào HTML bằng cách kèm theo các thẻ
Bạn nghĩ gì về bài báo này?
