Tôi có thể sử dụng các biến trong CSS không?

Kể từ năm 2016, Biến CSS hoàn toàn có thể sử dụng được trong Chrome và Firefox và IE cũng đã tuyên bố ý định triển khai nó

Giống như nhiều tính năng JavaScript và CSS mới, có thể hơi khó để hình dung những gì bạn có thể cần hoặc sử dụng một biến CSS cho. Đối với hầu hết chúng ta, tất cả kinh nghiệm của chúng ta đều ở thế giới tiền biến, vì vậy không nhất thiết phải rõ ràng chúng ta có thể sử dụng chúng để làm gì. Tuy nhiên, chúng tôi đã tìm thấy một câu trả lời tuyệt vời, giao tiếp giữa JavaScript và CSS

Biến CSS là gì?

Biến CSS (spec) thêm hai khái niệm mới vào CSS. Giờ đây, bạn có thể xác định các thuộc tính tùy chỉnh bắt đầu bằng hai dấu gạch ngang (

a {
  color: var(--main-color)
}

1)

html {
  --main-color: #06c
}

Sau đó, bạn có thể sử dụng chúng với

a {
  color: var(--main-color)
}

2

a {
  color: var(--main-color)
}

Đối với bất kỳ ai quen thuộc với SASS hoặc một ngôn ngữ tương tự biên dịch thành CSS, lợi thế của điều này là rõ ràng, bạn có thể dễ dàng thay đổi màu sắc, kích thước, v.v. ở một địa điểm duy nhất

Thật thú vị, các biến tuân theo cùng một quy tắc kế thừa của các thuộc tính CSS khác. Ví dụ: có lẽ chúng tôi muốn điều chỉnh màu chính trên blog của mình

.blog-post {
  --main-color: #9b806b
}

Bất kỳ liên kết nào trong phần bài đăng trên blog của trang đó giờ sẽ có màu nâu khá khủng khiếp

Kết hợp các biến CSS với các biểu thức

a {
  color: var(--main-color)
}

3 thật tuyệt vời

html {
  --header-height: 40px
}

.page-content {
  top: calc(var(--header-height) + 10px)
}

Biến CSS và JavaScript

Gần đây, chúng tôi đã xem được polyfill thanh trượt của Lea Verou thể hiện cách sử dụng thú vị các Biến CSS để giao tiếp giữa JavaScript và CSS

Trước đây, nếu bạn muốn kiểm soát CSS bằng một biến hoặc hàm trong JavaScript, tùy chọn duy nhất của bạn về cơ bản là viết CSS bằng JavaScript

Các biến CSS, được gọi chính xác hơn là thuộc tính tùy chỉnh CSS, đang cập bến Chrome 49. Chúng có thể hữu ích để giảm sự lặp lại trong CSS và cũng cho các hiệu ứng thời gian chạy mạnh mẽ như chuyển đổi chủ đề và các tính năng CSS trong tương lai có khả năng mở rộng/đa dạng hóa

lộn xộn CSS

Khi thiết kế một ứng dụng, một thông lệ phổ biến là dành riêng một bộ màu thương hiệu sẽ được sử dụng lại để giữ cho giao diện của ứng dụng nhất quán. Thật không may, việc lặp đi lặp lại các giá trị màu này trong CSS của bạn không chỉ là một việc vặt mà còn dễ xảy ra lỗi. Nếu tại một thời điểm nào đó, một trong các màu cần được thay đổi, bạn có thể thận trọng và “tìm và thay thế” tất cả mọi thứ, nhưng trên một dự án đủ lớn, điều này có thể dễ dàng trở nên nguy hiểm.

Trong thời gian gần đây, nhiều nhà phát triển đã chuyển sang sử dụng các bộ tiền xử lý CSS như SASS hoặc LESS để giải quyết vấn đề này thông qua việc sử dụng các biến của bộ tiền xử lý. Mặc dù các công cụ này đã giúp tăng năng suất của nhà phát triển lên rất nhiều, nhưng các biến mà họ sử dụng lại gặp phải một nhược điểm lớn, đó là chúng tĩnh và không thể thay đổi trong thời gian chạy. Việc thêm khả năng thay đổi các biến trong thời gian chạy không chỉ mở ra cơ hội cho những thứ như tạo chủ đề ứng dụng động mà còn tạo ra sự phân nhánh lớn cho thiết kế đáp ứng và tiềm năng đa dạng hóa các tính năng CSS trong tương lai. Với việc phát hành Chrome 49, những khả năng này hiện có sẵn ở dạng thuộc tính tùy chỉnh CSS

Thuộc tính tùy chỉnh một cách ngắn gọn

Thuộc tính tùy chỉnh thêm hai tính năng mới vào hộp công cụ CSS của chúng tôi

• Khả năng tác giả gán các giá trị tùy ý cho một thuộc tính có tên do tác giả chọn
• Hàm

  --foo: if(x > 5) this.width = 10;

  4, cho phép tác giả sử dụng các giá trị này trong các thuộc tính khác

Đây là một ví dụ nhanh để chứng minh

________số 8

--foo: if(x > 5) this.width = 10;

5 là thuộc tính tùy chỉnh do tác giả xác định có giá trị là #06c. Lưu ý rằng tất cả các thuộc tính tùy chỉnh đều bắt đầu bằng hai dấu gạch ngang

Hàm

--foo: if(x > 5) this.width = 10;

4 truy xuất và thay thế chính nó bằng giá trị thuộc tính tùy chỉnh, dẫn đến

--foo: if(x > 5) this.width = 10;

7 Miễn là thuộc tính tùy chỉnh được xác định ở đâu đó trong biểu định kiểu của bạn, thuộc tính đó sẽ có sẵn cho hàm

--foo: if(x > 5) this.width = 10;

8

Cú pháp ban đầu có thể trông hơi lạ. Nhiều nhà phát triển hỏi, "Tại sao không chỉ sử dụng

--foo: if(x > 5) this.width = 10;

9 cho tên biến?" . Đối với cốt truyện, bạn có thể đọc bài đăng này từ một trong những tác giả cụ thể, Tab Atkins

Cú pháp thuộc tính tùy chỉnh

Cú pháp cho một thuộc tính tùy chỉnh rất đơn giản

html {
  --main-color: #06c
}

5

Lưu ý rằng các thuộc tính tùy chỉnh phân biệt chữ hoa chữ thường, do đó,

html {
  --main-color: #06c
}

61 và

html {
  --main-color: #06c
}

62 là các thuộc tính tùy chỉnh khác nhau. Mặc dù chúng có vẻ đơn giản theo mệnh giá, nhưng cú pháp được phép cho các thuộc tính tùy chỉnh thực sự khá dễ dãi. Ví dụ: sau đây là thuộc tính tùy chỉnh hợp lệ

--foo: if(x > 5) this.width = 10;

Mặc dù điều này sẽ không hữu ích với tư cách là một biến, vì nó sẽ không hợp lệ trong bất kỳ thuộc tính thông thường nào, nhưng nó có thể được đọc và xử lý bằng JavaScript trong thời gian chạy. Điều này có nghĩa là các thuộc tính tùy chỉnh có khả năng mở khóa tất cả các loại kỹ thuật thú vị hiện không thể thực hiện được với các bộ tiền xử lý CSS ngày nay. Vì vậy, nếu bạn đang nghĩ "ngáp tôi có SASS vậy thì ai quan tâm ..." thì hãy xem lại. Đây không phải là những biến bạn đã từng làm việc với

dòng thác

Các thuộc tính tùy chỉnh tuân theo các quy tắc xếp tầng tiêu chuẩn, vì vậy, bạn có thể xác định cùng một thuộc tính ở các mức độ cụ thể khác nhau

html {
  --main-color: #06c
}

6

a {
  color: var(--main-color)
}

0

Điều này có nghĩa là bạn có thể tận dụng các thuộc tính tùy chỉnh bên trong truy vấn phương tiện để hỗ trợ thiết kế đáp ứng. Một trường hợp sử dụng có thể là mở rộng lề xung quanh các thành phần phân chia chính của bạn khi kích thước màn hình tăng lên

a {
  color: var(--main-color)
}

1

Điều quan trọng cần chỉ ra là không thể sử dụng đoạn mã trên bằng cách sử dụng các bộ tiền xử lý CSS ngày nay, vốn không thể xác định các biến bên trong các truy vấn phương tiện. Có khả năng này mở ra rất nhiều tiềm năng

Cũng có thể có các thuộc tính tùy chỉnh lấy giá trị của chúng từ các thuộc tính tùy chỉnh khác. Điều này có thể cực kỳ hữu ích cho chủ đề

a {
  color: var(--main-color)
}

2

Hàm var()

Để truy xuất và sử dụng giá trị của thuộc tính tùy chỉnh, bạn cần sử dụng hàm

--foo: if(x > 5) this.width = 10;

4. Cú pháp của hàm

--foo: if(x > 5) this.width = 10;

4 trông như thế này

a {
  color: var(--main-color)
}

5

Trong đó

html {
  --main-color: #06c
}

65 là tên của thuộc tính tùy chỉnh do tác giả xác định, chẳng hạn như

html {
  --main-color: #06c
}

66 và

html {
  --main-color: #06c
}

67 là giá trị dự phòng sẽ được sử dụng khi thuộc tính tùy chỉnh được tham chiếu không hợp lệ. Giá trị dự phòng có thể là danh sách được phân tách bằng dấu phẩy, danh sách này sẽ được kết hợp thành một giá trị duy nhất. Ví dụ:

html {
  --main-color: #06c
}

68 xác định dự phòng của

html {
  --main-color: #06c
}

69. Hãy nhớ rằng các giá trị tốc ký, chẳng hạn như các giá trị được sử dụng cho lề và phần đệm, không được phân tách bằng dấu phẩy, do đó, một dự phòng thích hợp cho phần đệm sẽ trông như thế này

a {
  color: var(--main-color)
}

1

Sử dụng các giá trị dự phòng này, tác giả thành phần có thể viết các kiểu phòng thủ cho thành phần của họ

a {
  color: var(--main-color)
}

2

Kỹ thuật này đặc biệt hữu ích cho các Thành phần web theo chủ đề sử dụng Shadow DOM, vì các thuộc tính tùy chỉnh có thể đi qua các ranh giới bóng tối. Tác giả Thành phần web có thể tạo một thiết kế ban đầu bằng cách sử dụng các giá trị dự phòng và hiển thị các "móc nối" theo chủ đề ở dạng thuộc tính tùy chỉnh

html {
  --main-color: #06c
}

50

html {
  --main-color: #06c
}

51

Khi sử dụng

--foo: if(x > 5) this.width = 10;

4, có một số vấn đề cần chú ý. Biến không thể là tên thuộc tính. Ví dụ

html {
  --main-color: #06c
}

52

Tuy nhiên, điều này không tương đương với cài đặt

a {
  color: var(--main-color)
}

01. Thay vào đó, khai báo thứ hai không hợp lệ và bị loại bỏ do lỗi

Tương tự, bạn không thể (ngây thơ) xây dựng một giá trị trong đó một phần của nó được cung cấp bởi một biến.

html {
  --main-color: #06c
}

53

Một lần nữa, điều này không tương đương với cài đặt

a {
  color: var(--main-color)
}

01. Để xây dựng một giá trị, bạn cần một cái gì đó khác. chức năng

a {
  color: var(--main-color)
}

03

Xây dựng giá trị với calc()

Nếu bạn chưa từng làm việc với nó trước đây, thì hàm ________ 203 là một công cụ nhỏ hữu ích cho phép bạn thực hiện các phép tính để xác định các giá trị CSS. Nó và có thể được kết hợp với các thuộc tính tùy chỉnh để xây dựng các giá trị mới. Ví dụ

html {
  --main-color: #06c
}

54

Làm việc với các thuộc tính tùy chỉnh trong JavaScript

Để lấy giá trị của một thuộc tính tùy chỉnh trong thời gian chạy, hãy sử dụng phương thức

a {
  color: var(--main-color)
}

05 của đối tượng CSSStyleDeclaration được tính toán

________ 155 ________ 156 ________ 157

Tương tự, để đặt giá trị của thuộc tính tùy chỉnh trong thời gian chạy, hãy sử dụng phương thức

a {
  color: var(--main-color)
}

06 của đối tượng

a {
  color: var(--main-color)
}

07

html {
  --main-color: #06c
}

55

html {
  --main-color: #06c
}

59____70

Bạn cũng có thể đặt giá trị của thuộc tính tùy chỉnh để tham chiếu đến một thuộc tính tùy chỉnh khác trong thời gian chạy bằng cách sử dụng hàm

--foo: if(x > 5) this.width = 10;

4 trong lệnh gọi tới

a {
  color: var(--main-color)
}

06

________ 71 ________ 72 ________ 73

Vì các thuộc tính tùy chỉnh có thể tham chiếu đến các thuộc tính tùy chỉnh khác trong biểu định kiểu của bạn, nên bạn có thể tưởng tượng điều này có thể dẫn đến tất cả các loại hiệu ứng thời gian chạy thú vị như thế nào

hỗ trợ trình duyệt

Hiện tại Chrome 49, Firefox 42, Safari 9. 1 và iOS Safari 9. 3 thuộc tính tùy chỉnh hỗ trợ

Thử nghiệm

Hãy dùng thử mẫu để có cái nhìn tổng quan về tất cả các kỹ thuật thú vị mà giờ đây bạn có thể tận dụng nhờ các thuộc tính tùy chỉnh

đọc thêm

Nếu bạn muốn tìm hiểu thêm về các thuộc tính tùy chỉnh, Philip Walton từ nhóm Google Analytics đã viết phần tóm tắt về lý do tại sao anh ấy hào hứng với các thuộc tính tùy chỉnh và bạn có thể theo dõi tiến trình của chúng trong các trình duyệt khác trên chromestatus. com

Các biến có thể được sử dụng trong CSS không?

Tôi nên sử dụng biến CSS hay Sass?

Các biến CSS được gọi là gì?

CSS hỗ trợ các biến khi nào?