Đã đăng vào thg 12 17, 2018 3:17 SA 3 phút đọc 3 phút đọc
Giới thiệu
Biến [variables] là một trong những khái niệm cơ bản trong lập trình chắc hẳn ai cũng đã biết. Trong CSS cũng vậy, các biến được khai báo trong CSS selector để xác đinh phạm vi của nó. Các trang web phức tạp hiện nay có số lượng CSS rất lớn, thường có rất nhiều giá trị lặp lại, CSS variables có khả năng làm giảm sử lặp lại đó bằng cách cho phép lưu trữ giá trị biến ở 1 nơi và sau đó được tham chiếu ở một nơi khác.
Cách sử dụng CSS Variables
1. Khai báo CSS Variables
Để khai báo một biến, trước tiên bạn cần quyết định phạm vi của biến đó sẽ tồn tại. Đối với global scope bạn có thể sử dụng
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
1, hoặc bạn cũng có thể tạo các biến cục bộ, tên biến phải bắt đầu bằng 2 dấu gạch ngang [--] và được phân biệt chữ hoa và chữ thường,:root {
--main-color: #ffeead;
--main-background: #ff0000;
}
2. Cách sử dụng CSS Variables
Để truy cập một biến, bạn cần sử dụng hàm var [] và truyền tên của biến làm tham số.
.title {
color: var[--main-color];
background-color: var[--main-background];
}
Kết quả của đoạn mã ở trên giống với
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
2 hoặc var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
3 khi được compiled. Tuy nhiên, so với các chương trình tiền xử lý, CSS variables có những lợi ích nhất định:- Được hỗ trợ trực tiếp bởi trình duyệt, không phải biên dịch.
- Các biến được chia theo tầng [cascading]. Cũng như CSS selectors, thuộc tính tùy biển có thể được quy định lại bởi những luật ở tầng thấp hơn.
- Giúp mã nguồn dễ đọc và có ý nghĩa hơn, nâng cao tính tùy biến và khả năng bảo trì.
- Hỗ trợ hầu hết các trình duyệt hiện tại
- Bạn cũng có thể kết hợp với hàm calc[] khi sử dụng CSS variables:
:root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
3. Cách truy cập các biến bằng JavaScript
- Do CSS variables tồn tại trong DOM, có thể được truy xuất và thay đổi bằng JavaScript. Tính năng này mở ra những cơ hội mới rất hữu ích khi lập trình frontend.
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
- Thay đổi giá trị của biến bằng Javascript
root.style.setProperty['--main-color', 'red']
4. Dễ dàng thay đổi giá trị các biến khi responsive
- Chúng ta có thể thay đổi giá trị của biến khi sử dụng
4,var root = document.querySelector[':root']; var rootStyles = getComputedStyle[root]; var mainColor = rootStyles.getPropertyValue['--main-color']; console.log[mainColor]; --> '#ffeead'
5, hayvar root = document.querySelector[':root']; var rootStyles = getComputedStyle[root]; var mainColor = rootStyles.getPropertyValue['--main-color']; console.log[mainColor]; --> '#ffeead'
6…var root = document.querySelector[':root']; var rootStyles = getComputedStyle[root]; var mainColor = rootStyles.getPropertyValue['--main-color']; console.log[mainColor]; --> '#ffeead'
:root {
--main-font-size: 16px;
}
media all and [max-width: 600px] {
:root {
--main-font-size: 12px;
}
}
5. Ngoài ra chúng ta có tuỳ chỉnh fallback values của variables
Sử dụng hàm var [], bạn có thể xác định nhiều giá trị fallback khi biến đã cho chưa được xác định, điều này có thể hữu ích khi làm việc với Custom Elements và Shadow DOM.
.el-one {
color: var[--my-var, red]; /* Red if --my-var is not defined */
}
.el-two {
background-color: var[--my-var, var[--my-background, pink]]; /* pink if my-var and --my-background are not defined */
}
Kết luận
Tính năng này khá là hữu ích khi các ứng dụng web ngày càng phức tạp về tính năng cũng như giao diện người dùng, mà bạn không muốn sử dụng các chương trình tiền xử lý CSS [CSS pre-processors] như SASS, LESS hay Stylus . Hẹn gặp lại các bạn trong các bài tiếp theo 😃
All rights reserved
What’s The Problem?
Nếu bạn đang sử dụng các
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
7 giống như var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
8 [ví dụ: Sass], thì bạn đang không tận dụng được đầy đủ lợi ích của chúng.Hãy xem xét những ví dụ sau:
:root {
--brand-primary: #7777e9;
--brand-secondary: #c96fde;
}
.title {
color: var[--brand-primary];
}
… nó không có gì khác biệt so với trong Sass:
$brand-primary: #7777e9;
$brand-secondary: #c96fde;
.title {
color: $brand-primary;
}
Chỉ sử dụng các
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 cho các biến màu không sai chút nào, nhưng nó giống như việc sử dụng Apple M1 MacBook để duyệt internet, mặc dù phiên bản cũ 2012 của bạn vẫn hoạt động tốt.Có ích gì khi để một chiếc máy tính tiên tiến thực hiện công việc tương tự trong khi bạn có cơ hội sử dụng hết tiềm năng của nó?
Đó chính xác là những gì chúng ta cảm nhận về việc sử dụng các
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9.Mục tiêu của bài viết này là hướng dẫn chúng ta qua các trường hợp sử dụng các biến CSS.
Use Cases And Examples
Longhand Properties
Trong một số trường hợp, bạn có thể cần phải điều chỉnh thủ công của thuộc tính css.
Ví dụ: một thuộc tính
root.style.setProperty['--main-color', 'red']
1 có thể khác khi ở trong component khác.Thay vì viết lại, chúng ta có thể sử dụng một
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 cho thứ sẽ thay đổi và nó sẽ được ghi đè thông qua root.style.setProperty['--main-color', 'red']
3.
...
...
...
...
.title {
color: var[--main-color];
background-color: var[--main-background];
}
0Lưu ý rằng chúng ta chỉ cần thay đổi giá trị
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 để thay đổi root.style.setProperty['--main-color', 'red']
1.Nếu không có
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9, chúng ta sẽ cần phải nhập toàn bộ thuộc tính root.style.setProperty['--main-color', 'red']
1 chỉ để ghi đè một giá trị của nó..title {
color: var[--main-color];
background-color: var[--main-background];
}
1Những điều trên cũng có thể áp dụng cho việc sử dụng
root.style.setProperty['--main-color', 'red']
8.CSS Backgrounds
Khi nói đến
root.style.setProperty['--main-color', 'red']
9, các var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 có thể giúp chúng ta giảm bớt code CSS mà chúng ta viết.Thậm chí tốt hơn, nó có thể làm cho CSS trông đơn giản hơn để đọc.
Storing The URL Value
Trong khi làm markup, có một số trường hợp, chúng ta cần sử dụng thẻ
:root {
--main-font-size: 16px;
}
media all and [max-width: 600px] {
:root {
--main-font-size: 12px;
}
}
1 với style :root {
--main-font-size: 16px;
}
media all and [max-width: 600px] {
:root {
--main-font-size: 12px;
}
}
2 để có thể giải quyết.Nếu không có
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9, HTML sẽ giống như sau:.title {
color: var[--main-color];
background-color: var[--main-background];
}
2Thay vì trực tiếp thay đổi thuộc tính
:root {
--main-font-size: 16px;
}
media all and [max-width: 600px] {
:root {
--main-font-size: 12px;
}
}
4, chúng ta có thể làm như sau..title {
color: var[--main-color];
background-color: var[--main-background];
}
3.title {
color: var[--main-color];
background-color: var[--main-background];
}
4Lưu ý rằng chúng ta cần bao gồm
:root {
--main-font-size: 16px;
}
media all and [max-width: 600px] {
:root {
--main-font-size: 12px;
}
}
5 mà không có var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9Background Position
Trong ví dụ trước,
:root {
--main-font-size: 16px;
}
media all and [max-width: 600px] {
:root {
--main-font-size: 12px;
}
}
7 được đặt ở phía bên phải.Đối với bố cục từ phải sang trái [RTL],
:root {
--main-font-size: 16px;
}
media all and [max-width: 600px] {
:root {
--main-font-size: 12px;
}
}
8 phải được lật lại..title {
color: var[--main-color];
background-color: var[--main-background];
}
5Chúng ta có thể thấy được sự trợ giúp từ các
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 để thực hiện việc này dễ dàng hơn..title {
color: var[--main-color];
background-color: var[--main-background];
}
6The Angle Of A Gradient: Part 1
Điều này cũng liên quan đến việc xây dựng bố cục cho đa ngôn ngữ.
Theo mặc định, một góc gradient có thể là
.el-one {
color: var[--my-var, red]; /* Red if --my-var is not defined */
}
.el-two {
background-color: var[--my-var, var[--my-background, pink]]; /* pink if my-var and --my-background are not defined */
}
0 và nó cần phải là .el-one {
color: var[--my-var, red]; /* Red if --my-var is not defined */
}
.el-two {
background-color: var[--my-var, var[--my-background, pink]]; /* pink if my-var and --my-background are not defined */
}
1 cho các bố cục RTL..title {
color: var[--main-color];
background-color: var[--main-background];
}
7The Angle Of A Gradient: Part 2
Liên quan đến góc
.el-one {
color: var[--my-var, red]; /* Red if --my-var is not defined */
}
.el-two {
background-color: var[--my-var, var[--my-background, pink]]; /* pink if my-var and --my-background are not defined */
}
2 sử dụng các var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 với gradient để điều chỉnh :root {
--main-font-size: 16px;
}
media all and [max-width: 600px] {
:root {
--main-font-size: 12px;
}
}
8 rất tiện dụng.Trong ví dụ sau, vị trí của gradient đã được thay đổi bằng cách chỉ thay đổi biến
.el-one {
color: var[--my-var, red]; /* Red if --my-var is not defined */
}
.el-two {
background-color: var[--my-var, var[--my-background, pink]]; /* pink if my-var and --my-background are not defined */
}
5.Đây là cách chúng ta có thể làm điều này mà không cần biến CSS.
.title {
color: var[--main-color];
background-color: var[--main-background];
}
8Giả sử rằng chúng ta có
.el-one {
color: var[--my-var, red]; /* Red if --my-var is not defined */
}
.el-two {
background-color: var[--my-var, var[--my-background, pink]]; /* pink if my-var and --my-background are not defined */
}
6, .el-one {
color: var[--my-var, red]; /* Red if --my-var is not defined */
}
.el-two {
background-color: var[--my-var, var[--my-background, pink]]; /* pink if my-var and --my-background are not defined */
}
7 và nó phải có :root {
--main-font-size: 16px;
}
media all and [max-width: 600px] {
:root {
--main-font-size: 12px;
}
}
8 khác nhau.Chúng ta cần viết như sau:
.title {
color: var[--main-color];
background-color: var[--main-background];
}
9Toàn bộ khai báo gradient đang được ghi đè.
:root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
0Clip Path
Một trường hợp sử dụng hữu ích cho các
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 là thay đổi các giá trị của :root {
--brand-primary: #7777e9;
--brand-secondary: #c96fde;
}
.title {
color: var[--brand-primary];
}
0 trên thiết bị di động so với giao diện pc.Trong hình trên, các điểm đa giác cần được thay đổi và việc sử dụng các
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 giúp quá trình đó dễ dàng hơn.:root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
1Nếu bạn muốn tìm hiểu thêm về
:root {
--brand-primary: #7777e9;
--brand-secondary: #c96fde;
}
.title {
color: var[--brand-primary];
}
2, đây thực sự là một bài viết của bạn.Checkbox Component
Một trường hợp sử dụng hoàn hảo cho các biến CSS là kết hợp chúng với
:root {
--brand-primary: #7777e9;
--brand-secondary: #c96fde;
}
.title {
color: var[--brand-primary];
}
3.Bằng cách đó, chúng ta có thể tạo các
:root {
--brand-primary: #7777e9;
--brand-secondary: #c96fde;
}
.title {
color: var[--brand-primary];
}
4 động thực hiện chúng bằng cách chỉ thay đổi một hoặc một vài var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9.Điều đầu tiên tôi đã làm là xác định các giá trị
:root {
--brand-primary: #7777e9;
--brand-secondary: #c96fde;
}
.title {
color: var[--brand-primary];
}
3 cho :root {
--brand-primary: #7777e9;
--brand-secondary: #c96fde;
}
.title {
color: var[--brand-primary];
}
7 của :root {
--brand-primary: #7777e9;
--brand-secondary: #c96fde;
}
.title {
color: var[--brand-primary];
}
4.:root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
2:root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
3Building Sass-Like Mixins
Ý tưởng là chúng ta là đặt các
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 ban đầu cho một thuộc tính cụ thể và sau đó chúng ta có thể ghi đè các biến khi cần.Trong nhiều trường hợp, chúng ta cần phải căn giữa các
$brand-primary: #7777e9;
$brand-secondary: #c96fde;
.title {
color: $brand-primary;
}
0, điều này có thể được giải quyết bằng cách thêm $brand-primary: #7777e9;
$brand-secondary: #c96fde;
.title {
color: $brand-primary;
}
1 vào.Trong trường hợp này, chúng ta sẽ đặt một class giữ
$brand-primary: #7777e9;
$brand-secondary: #c96fde;
.title {
color: $brand-primary;
}
2, một class giữ giá trị của biến căn giữa đó::root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
4:root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
5Đầu tiên, chúng ta đã tạo một class
$brand-primary: #7777e9;
$brand-secondary: #c96fde;
.title {
color: $brand-primary;
}
3 với các giá trị lề ngang và dọc mặc định.Chúng ta có thể thêm class đó vào phần tử và sau đó ghi đè các
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9.Using Calc[]
Hàm
$brand-primary: #7777e9;
$brand-secondary: #c96fde;
.title {
color: $brand-primary;
}
5 có thể rất tiện dụng với các var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9.Chúng ta có thể tạo kích thước cơ sở cho một
:root {
--brand-primary: #7777e9;
--brand-secondary: #c96fde;
}
.title {
color: var[--brand-primary];
}
4, sau đó chỉ thay đổi var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 để làm cho nó nhỏ hơn hoặc lớn hơn.Điều này có thể hữu ích cho các trường hợp sử dụng khác nhau.
:root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
6Lưu ý rằng chúng ta đã sử dụng
$brand-primary: #7777e9;
$brand-secondary: #c96fde;
.title {
color: $brand-primary;
}
9.Nếu biến
...
...
...
...
0 không được xác định, thì
...
...
...
...
1 sẽ được sử dụng như một giá trị mặc định.
...
...
...
...
2 quan trọng để thêm
...
...
...
...
3 vào số cuối cùng.Với điều đó, chúng ta có thể tạo các class có thể dùng chung bằng cách thêm
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9
...
...
...
...
0.:root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
7Pseudo-Elements
Với các
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9, có thể thay đổi
...
...
...
...
7 vì thuộc tính này được kế thừa từ thuộc tính gốc của nó.Hãy xem xét ví dụ sau:
Phần tiêu đề có một đường màu tím sử dụng
...
...
...
...
7 để trang trí.Chúng ta có thể chuyển một
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 vào tiêu đề và
...
...
...
...
7 sẽ kế thừa nó.:root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
8Ngoài ra, chúng ta còn có thể thay đổi
...
...
...
...
7 thông qua Javascript code.Inline Styles
Một cách sử dụng hữu ích khác cho các
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 là sử dụng chúng như .title {
color: var[--main-color];
background-color: var[--main-background];
}
03.Điều này có thể mở ra rất nhiều khả năng tùy chỉnh
:root {
--brand-primary: #7777e9;
--brand-secondary: #c96fde;
}
.title {
color: var[--brand-primary];
}
4 chỉ bằng cách thay đổi một hoặc nhiều biến.Hãy xem xét ví dụ sau.
:root {
--default-font-size: 1.1rem;
}
h2 {
font-size: calc[var[--default-font-size] * 5]; /* 5.5rem */
}
9Chúng ta có một
.title {
color: var[--main-color];
background-color: var[--main-background];
}
05 và chiều rộng mặc định là .title {
color: var[--main-color];
background-color: var[--main-background];
}
06.Trong HTML, chúng ta có thể ghi đè bằng cách đặt lại
var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
9 thành một giá trị khác.var root = document.querySelector[':root'];
var rootStyles = getComputedStyle[root];
var mainColor = rootStyles.getPropertyValue['--main-color'];
console.log[mainColor];
--> '#ffeead'
0Nếu bạn quan tâm đến
.title {
color: var[--main-color];
background-color: var[--main-background];
}
08 , có thể xem thêm bài viết này.Conclusion
Trên là tìm hiểu vể các trường hợp sử dụng
.title {
color: var[--main-color];
background-color: var[--main-background];
}
09, hi vọng giúp ích được cho mọi ngườiThank for watching!!!
References
- use css variables
- css variable 101
- css variables inline
- benefits css variables
- practical-css-variables