Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS3

Các Thuộc tính tuỳ biến trong CSS: Biến

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Biến luôn tồn tại trong tất cả các ngôn ngữ lập trình, và đó là bởi vì chúng là rất hữu ích. Bạn chỉ cần lưu trữ một giá trị trong một biến một lần, và sau đó bạn có thể sử dụng nó sau này nhiều lần, tránh sự lặp lại. Mặc dù CSS không phải là một ngôn ngữ lập trình, nhưng việc thiếu biến vẫn hạn chế khả năng của nó.

Bây giờ thì biến CSS đã xuất hiện, tôi muốn thảo luận về việc chúng khác so với các biến mà CSS preprocessor cung cấp ra sao và sử dụng chúng như thế nào cho đúng cách.

Lợi thế của các Thuộc tính tùy biến

Cú pháp sử dụng thuộc tính tùy biến có một chút dài dòng và một số nhà phát triển có thể sợ nó. Một yếu tố khuyến khích việc sử dụng biến tự nhiên là sự hỗ trợ sẵn có được cung cấp bởi các biến Sass.

Mặc dù các preprocessor như Sass hỗ trợ biến, nhưng chúng vẫn còn có một số hạn chế mà tôi sẽ thảo luận trong phần này.

Bạn không thể cập nhật các biến trong preprocessor dựa trên Media Query. Để làm cho một trang web có tính đáp ứng, bạn cần phải thay đổi các giá trị dựa trên kích thước màn hình. Các biến của preprocessor không thể làm được điều đó. Ví dụ, hãy xem xét các code sau đây:

Nó sẽ biên dịch thành:

Như bạn có thể thấy, sự chỉ định bên trong Media Query hoàn toàn bị bỏ qua. Mặt khác, các biến CSS sẽ lưu ý đến nhiệm vụ này trong một Media Query.

Tương tự, các biến trong preprocessor không nối tiếp hoặc không kế thừa. Sử dụng biến gốc, bạn có thể loại bỏ hết những hạn chế này. Một lợi thế quan trọng của việc sử dụng các biến gốc là chúng tương thích. Không giống như các biến trong Sass, mà sẽ chỉ làm việc với Sass, các biến gốc sẽ hoạt động không chỉ với preprocessor mà còn trong các tập tin thuần CSS.

Cú pháp và Sử dụng

Để hiểu cách sử dụng các thuộc tính CSS tuỳ biến, chúng ta hãy bắt đầu với một ví dụ cơ bản:

Bất cứ khi nào bạn định nghĩa một thuộc tính tuỳ biến, bạn bắt đầu bằng cách xác định phạm vi của nó. Phạm vi xác định các nút DOM mà thuộc tính tuỳ biến hiện hữu. Sử dụng :root nói lên rằng thuộc tính tuỳ biến là hiện hữu cho tất cả các phần tử. Hãy nhớ rằng tất cả các thuộc tính tùy biến phải bắt đầu với hai dấu gạch ngang.

Nếu bạn có ý định sử dụng một thuộc tính tuỳ biến, bạn sẽ phải tham chiếu nó với hàm var(). Hàm này nhận hai đối số; đầu tiên là thuộc tính tùy biến, và thứ hai là một giá trị dự phòng. Giá trị dự phòng được sử dụng khi một thuộc tính tùy biến không được định nghĩa trên bất kỳ phần tử cha hoặc nếu giá trị của nó không hợp lệ.

Bạn nên lưu ý rằng các thuộc tính tùy biến là phân biệt hoa thường. Điều này nói lên rằng --text-color, --Text-Color--text-Color tất cả đều khác nhau.

Có thêm một vài điều mà bạn nên lưu ý trong khi sử dụng var().

Đầu tiên là các giá trị dự phòng có thể được phân tách bằng dấu phẩy, và trong trường hợp các giá trị viết tắt như margin, bạn không cần phải tách riêng các giá trị bằng dấu phẩy. Ví dụ: var(--para-font-family, "Lato", "Roboto"); thiết lập giá trị dự phòng là "Lato" "Roboto";. Tương tự, một dự phòng thuộc tính border sẽ trông giống như sau:

Thứ hai là bạn không thể sử dụng các biến giống với tên các thuộc tính. Cdoe sau đây sẽ sinh ra một lỗi trong câu lệnh thứ hai.

Thiết lập các Giá trị với Calc()

Với những điều cơ bản đã được khái quát, chúng ta hãy xem cách làm thế nào để chúng ta có thể xây dựng các giá trị từ các thuộc tính tùy biến. Nếu bạn đã chỉ định một số tối thiểu vào một biến, bạn sẽ không thể thêm nó trực tiếp vào một số đơn vị để có được một giá trị hợp lệ. Tóm lại, code dưới đây là không hợp lệ:

Bạn sẽ phải sử dụng hàm calc() để thực hiện một số tính toán và xây dựng các giá trị CSS cuối cùng. Để làm cho code ở trên hoạt động, bạn sẽ phải sửa đổi nó giống như sau:

Bạn không bị giới hạn chỉ với đơn vị px. Bạn có thể sử dụng tất cả các đơn vị hợp lệ có sẵn trong CSS.

Sử dụng các Biến với Javascript

Các biến CSS gốc cũng có thể tương tác với JavaScript. Để có được giá trị của chúng, bạn có thể sử dụng các code sau đây:

Hàm trim() sẽ loại bỏ khoảng trắng từ cả hai đầu của giá trị.

Nếu bạn muốn thiết lập giá trị của một thuộc tính tuỳ biến, bạn sẽ phải sử dụng phương thức setProperty().

Biến --background bây giờ là màu đen. Bạn cũng có thể thiết lập một thuộc tính tuỳ biến để tham chiếu đến thuộc tính khác bằng cách sử dụng hàm var().

Câu lệnh nêu trên là hoàn toàn hợp lệ và thiết lập giá trị của --h-color tương đương với --p-color.

Thay đổi theme một cách tự động

Biến có thể cung cấp rất nhiều tính linh hoạt khi đề cập đến việc thay đổi theme dựa trên sở thích của người dùng. Trước đó, bạn phải sử dụng phong cách nội tuyến hoặc tạo ra nhiều stylesheet. Cả hai phương pháp này đều có những điểm hạn chế của riêng chúng. Tạo ra nhiều stylesheet là một công việc nặng nhọc, và sử dụng phong cách nội tuyến là cách làm tệ nhất. Biến có thể cung cấp một cách giải quyết dễ dàng trong tình huống này. Dưới đây là một số JavaScript cơ bản để thay đổi theme một cách tự động:

Code ở trên đính kèm một sự kiện bấm vào nút theme của chúng ta. Ngay sau khi có ai đó nhấp chuột vào nó, thì hàm greenTheme() thiết lập các các giá trị của một vài biến để thay đổi cái nhìn tổng thể của trang web. Như bạn thấy, phương pháp này dễ thực hiện hơn so với hai giải pháp kia.

Bạn có thể thử thêm một vài biến nữa hoặc tạo thêm các theme trong demo này trên CodePen.

Kết luận

Bài hướng dẫn có vẻ như đã gợi ý rằng các biến CSS gốc là vượt trội so với các biến trong preprocessor như Sass, nhưng tôi hoàn toàn không cho rằng các biến preprocessor là vô ích. Sử dụng các CSS preprocessor sẽ làm tăng hiệu suất. Chúng có nhiều thứ hơn để cung cấp thay vì chỉ là các biến. Rất nhiều hàm, vòng lặp và câu lệnh điều kiện được tích hợp sẵn làm cho mọi thứ hoàn thành một cách nhanh chóng.

Hướng dẫn này chỉ đơn thuần là chỉ ra rằng ngay cả khi các biến gốc có cú pháp lạ, thì chúng vẫn còn có rất nhiều thứ để cung cấp và đáng để sử dụng trong các dự án của bạn. Nếu bạn có bất kỳ câu hỏi nào liên quan đến hướng dẫn này, hãy cho tôi biết trong phần bình luận nhé.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.