Biến CSS, còn được gọi là thuộc tính tùy chỉnh, giúp bạn giảm thiểu sự lặp lại trong biểu định kiểu của mình. Đổi lại, điều này giúp bạn tiết kiệm thời gian và công sức khi thực hiện các thay đổi đối với thiết kế của mình. Bạn cũng có thể yên tâm rằng mình sẽ không bỏ lỡ bất kỳ giá trị nào cần cập nhật.
Quyền truy cập vào DOM cho phép bạn tạo các biến, lưu trữ và sử dụng lại chúng trong suốt biểu định kiểu của bạn.
Cách xác định và sử dụng các biến CSS
Để làm cho biểu định kiểu của bạn được sắp xếp hợp lý hơn, có thể bảo trì và sử dụng lại, bạn có thể sử dụng các biến CSS trong bất kỳ thuộc tính nào chấp nhận một giá trị.
Lấy ví dụ sau về tệp HTML và tệp CSS không sử dụng biến CSS.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary">Primary</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: red;
}
Đây là những gì trang của bạn sẽ trông giống như:
Các .btn lớp được sử dụng trong biểu định kiểu ở trên không động và khiến bạn phải tạo một lớp riêng để tùy chỉnh các nút riêng lẻ. Tạo các trang web đẹp đòi hỏi bạn phải năng động với kiểu dáng giao diện người dùng của mình. Việc triển khai các nút theo cách này sẽ đơn giản khiến nhiệm vụ đó trở nên khó khăn.
Giống như hầu hết các ngôn ngữ lập trình, Bạn phải khởi tạo và thay thế các biến CSS.
Để khởi tạo một biến CSS, hãy thêm hai dấu gạch ngang vào trước tên biến:
:root{
}
Bạn có thể khởi tạo một biến ở bất cứ đâu nhưng lưu ý rằng bạn sẽ chỉ có thể sử dụng biến đó bên trong bộ chọn đã khởi tạo. Do đó, các biến CSS được khởi tạo theo quy ước bên trong bộ chọn gốc. Điều này nhắm mục tiêu phần tử cấp cao nhất của DOM và cho phép toàn bộ tài liệu HTML có thể truy cập các biến trên quy mô toàn cầu.
Để thay thế biến thành kiểu dáng CSS của bạn, bạn sẽ sử dụng biến () tài sản:
:root {
--primary:
--secondary:
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary);
background-color: var(--secondary);
}
.sub-primary {
color: var(--secondary);
background-color: var(--primary);
}
Bộ chọn gốc chứa hai biến: –chủ yếu và –thứ hai. Cả hai biến sau đó được thay thế vào .btn lớp dưới dạng màu và màu nền tương ứng.
Sử dụng các biến, bạn có thể tạo kiểu cho các phần tử riêng lẻ dễ dàng hơn nhiều. Bằng cách sử dụng lại các biến, bạn có thể nhanh chóng thay đổi giá trị một lần để cập nhật giá trị đó trong mọi trường hợp.
Các biến () thuộc tính cũng có thể nhận đối số thứ hai. Đối số này hoạt động như một giá trị dự phòng cho đối số đầu tiên trong trường hợp đối số đầu tiên không được xác định hoặc không hợp lệ.
Ví dụ:
:root {
--primary:
--secondary:
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary, blue);
}
Trong ví dụ này, thay thế các –chủ yếu biến thành màu Phong cách. Nếu vì bất kỳ lý do gì, giá trị này không thành công, biểu định kiểu sẽ sử dụng giá trị thứ hai làm dự phòng. Bạn cũng có thể sử dụng một biến CSS khác làm giá trị dự phòng.
Thao tác và ghi đè các biến CSS bằng JavaScript
Thao tác với các biến CSS bằng JavaScript có thể là một cách mạnh mẽ để thay đổi giao diện trang web của bạn một cách nhanh chóng. Sử dụng JavaScript, bạn có thể cập nhật giá trị của các biến này và xem các thay đổi được phản ánh trong trang web của mình.
Điều quan trọng cần lưu ý là những thay đổi được thực hiện bằng JavaScript sẽ chỉ áp dụng cho phiên hiện tại. Bạn phải cập nhật nguồn ban đầu hoặc lưu trữ giá trị mới trên máy khách, chẳng hạn như trong cookie, để duy trì các thay đổi.
Dưới đây là ví dụ về cách sử dụng JavaScript để cập nhật giá trị của biến CSS.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
<script>
function changeColor() {
const myElement = document.querySelector(":root");
let currentValue = getComputedStyle(myElement).getPropertyValue(
"--secondary"
);
// Set the new value for the variable
myElement.style.setProperty("--secondary"https://www.smartreviewaz.com/css-variables-how-use-pro/,"#DAF7A6");
}
</script>
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary" onclick="changeColor()">
Primary
</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
:root {
--primary:
--secondary:
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
}
.sub-primary {
color: var(--primary);
background-color: var(--secondary);
}
Trong mã JavaScript này, thay đổiColor() chức năng cập nhật màu của nút đầu tiên khi người dùng nhấp vào nó.
Sử dụng các phương thức truyền tải DOM, bạn có thể truy cập các lớp hoặc bộ chọn được áp dụng trong tài liệu HTML của mình và thao tác các giá trị.
Trước khi nhấp vào nút:
Sau khi nhấp vào nút:
Bạn cũng có thể sử dụng JavaScript để tạo các biến CSS mới hoặc loại bỏ chúng hoàn toàn.
Ví dụ:
// Create a new variable
document.documentElement.style.setProperty('--new-color', 'blue');
document.documentElement.style.removeProperty('--new-color');
Sử dụng các biến CSS với bộ tiền xử lý
Việc sử dụng các biến trong công nghệ giao diện người dùng ban đầu đạt được với các bộ tiền xử lý CSS như SASS, LESS và Bút stylus.
Mục đích của bộ tiền xử lý CSS là phát triển mã mở rộng các khả năng cơ bản của CSS tiêu chuẩn. Sau đó, hãy biên dịch mã đó thành CSS tiêu chuẩn để trình duyệt hiểu, giống như cách TypeScript hoạt động với JavaScript.
Với sự phát triển của các biến CSS, các bộ tiền xử lý không còn quan trọng nữa nhưng chúng vẫn có thể mang lại một số công dụng nếu được kết hợp với các biến CSS trong dự án của bạn.
Bạn có thể định nghĩa một biến SASS $main-color và sử dụng nó để đặt giá trị của một biến CSS. Sau đó, sử dụng biến CSS trong một lớp kiểu thông thường.
Bạn cũng có thể sử dụng các hàm SASS để thao tác các giá trị của các biến CSS.
Ví dụ:
:root {
--primary: $main-color;
--secondary: lighten(var(--primary), 20%);
}
.btn {
color: var(--primary);
background-color: var(--secondary);
}
Ở đây, chức năng SASS làm sáng () thao túng giá trị của –chủ yếu để có được một giá trị cho –thứ hai.
Lưu ý rằng JavaScript không thể truy cập các biến SASS. Vì vậy, nếu bạn cần thao tác các giá trị của các biến trong thời gian chạy, bạn nên sử dụng các biến CSS.
Khi sử dụng các biến CSS và bộ tiền xử lý cùng nhau, bạn có thể tận dụng cả hai lợi ích, chẳng hạn như sử dụng các tính năng mạnh mẽ của bộ tiền xử lý như vòng lặp và hàm cũng như tính năng biến CSS như xếp tầng CSS.
Mẹo sử dụng các biến CSS trong phát triển web
Dưới đây là một số mẹo quan trọng cần lưu ý sẽ giúp bạn sử dụng các biến CSS tốt hơn.
Bắt đầu với quy ước đặt tên rõ ràng
Chọn một quy ước đặt tên cho các biến của bạn để giúp chúng dễ hiểu và dễ sử dụng. Ví dụ: sử dụng tiền tố như –màu- cho các biến màu hoặc –khoảng cách- cho các biến khoảng cách.
Sử dụng các biến trong truy vấn phương tiện
Sử dụng các biến trong truy vấn phương tiện để dễ dàng điều chỉnh thiết kế của bạn cho các kích thước màn hình khác nhau.
Tận dụng bản chất xếp tầng của CSS
Hãy nhớ rằng các biến CSS là xếp tầng, nghĩa là nếu bạn đặt một biến trên phần tử cha, nó sẽ ảnh hưởng đến tất cả các phần tử con của nó.
Thận trọng khi sử dụng các biến CSS
Sử dụng quá nhiều Biến CSS có thể gây nhầm lẫn, vì vậy hãy thận trọng khi sử dụng chúng và chỉ khi nó hợp lý và cải thiện khả năng bảo trì mã của bạn.
Kiểm tra các biến của bạn
Các biến CSS là một cách độc đáo để viết mã rõ ràng và có thể bảo trì trong biểu định kiểu của bạn.
Điều quan trọng cần lưu ý là chúng vẫn chưa được hỗ trợ đầy đủ trên tất cả các trình duyệt. Do đó, bạn nên kiểm tra khả năng tương thích của các biến với trình duyệt để đảm bảo rằng chúng đang hoạt động như mong đợi và mọi giá trị dự phòng đều hoạt động như bạn mong đợi.
