Hướng dẫn root css variables - biến css gốc
Show Đã đăng vào thg 12 17, 2018 3:17 SA 3 phút đọc 3 phút đọc Giới thiệuBiế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 Variables1. 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 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,
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ố.
Kết quả của đoạn mã ở trên giống với 2 hoặc 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:
3. Cách truy cập các biến bằng JavaScript
4. Dễ dàng thay đổi giá trị các biến khi responsive
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.
Kết luậnTí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 7 giống như 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:
… nó không có gì khác biệt so với trong Sass:
Chỉ sử dụng các 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 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 ExamplesLonghand PropertiesTrong 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 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 9 cho thứ sẽ thay đổi và nó sẽ được ghi đè thông qua 3. 0Lưu ý rằng chúng ta chỉ cần thay đổi giá trị 9 để thay đổi 1.Nếu không có 9, chúng ta sẽ cần phải nhập toàn bộ thuộc tính 1 chỉ để ghi đè một giá trị của nó. 1Những điều trên cũng có thể áp dụng cho việc sử dụng 8.CSS BackgroundsKhi nói đến 9, các 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 ValueTrong khi làm markup, có một số trường hợp, chúng ta cần sử dụng thẻ 1 với style 2 để có thể giải quyết.Nếu không có 9, HTML sẽ giống như sau: 2Thay vì trực tiếp thay đổi thuộc tính 4, chúng ta có thể làm như sau. 3 4Lưu ý rằng chúng ta cần bao gồm 5 mà không có 9Background PositionTrong ví dụ trước, 7 được đặt ở phía bên phải.Đối với bố cục từ phải sang trái (RTL), 8 phải được lật lại. 5Chúng ta có thể thấy được sự trợ giúp từ các 9 để thực hiện việc này dễ dàng hơn. 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à 0 và nó cần phải là 1 cho các bố cục RTL. 7The Angle Of A Gradient: Part 2Liên quan đến góc 2 sử dụng các 9 với gradient để điều chỉnh 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 5.Đây là cách chúng ta có thể làm điều này mà không cần biến CSS. 8Giả sử rằng chúng ta có 6, 7 và nó phải có 8 khác nhau.Chúng ta cần viết như sau: 9Toàn bộ khai báo gradient đang được ghi đè. 0Clip PathMột trường hợp sử dụng hữu ích cho các 9 là thay đổi các giá trị của 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 9 giúp quá trình đó dễ dàng hơn. 1Nếu bạn muốn tìm hiểu thêm về 2, đây thực sự là một bài viết của bạn.Checkbox ComponentMộ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 3.Bằng cách đó, chúng ta có thể tạo các 4 động thực hiện chúng bằng cách chỉ thay đổi một hoặc một vài 9.Điều đầu tiên tôi đã làm là xác định các giá trị 3 cho 7 của 4. 2 3Building Sass-Like MixinsÝ tưởng là chúng ta là đặt các 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 0, điều này có thể được giải quyết bằng cách thêm 1 vào.Trong trường hợp này, chúng ta sẽ đặt một class giữ 2, một class giữ giá trị của biến căn giữa đó: 4 5Đầu tiên, chúng ta đã tạo một class 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 9.Using Calc()Hàm 5 có thể rất tiện dụng với các 9.Chúng ta có thể tạo kích thước cơ sở cho một 4, sau đó chỉ thay đổi 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. 6Lưu ý rằng chúng ta đã sử dụng 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 9 0. 7Pseudo-ElementsVới các 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 9 vào tiêu đề và 7 sẽ kế thừa nó. 8Ngoài ra, chúng ta còn có thể thay đổi 7 thông qua Javascript code.Inline StylesMột cách sử dụng hữu ích khác cho các 9 là sử dụng chúng như 03.Điều này có thể mở ra rất nhiều khả năng tùy chỉnh 4 chỉ bằng cách thay đổi một hoặc nhiều biến.Hãy xem xét ví dụ sau. 9Chúng ta có một 05 và chiều rộng mặc định là 06.Trong HTML, chúng ta có thể ghi đè bằng cách đặt lại 9 thành một giá trị khác. 0Nếu bạn quan tâm đến 08 , có thể xem thêm bài viết này.ConclusionTrên là tìm hiểu vể các trường hợp sử dụng 09, hi vọng giúp ích được cho mọi ngườiThank for watching!!! References
|