Hướng dẫn css selector root - gốc của bộ chọn css

Nội dung chính ShowShow

• Giới thiệu
• Cách sử dụng CSS Variables
• Kết luận
• What’s The Problem?
• Use Cases And Examples
• Longhand Properties
• CSS Backgrounds
• Checkbox Component
• Building Sass-Like Mixins
• Using Calc()
• Pseudo-Elements
• Inline Styles

Một cách sử dụng hữu ích khác cho các 3 phút đọc

Giới thiệu

Cách sử dụng CSS Variables

Cách sử dụng CSS Variables

Kết luận

What’s The Problem?

Longhand Properties

CSS Backgrounds

.title {
  color: var(--main-color);
  background-color:  var(--main-background);
}

Checkbox Component

• Đã đăng vào thg 12 17, 2018 3:17 SA 3 phút đọc 3 phút đọc
• 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.
• 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;
  }
  

:root {
  --default-font-size: 1.1rem;
}

h2 {
  font-size: calc(var(--default-font-size) * 5); /* 5.5rem */
}

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ố.

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); 
--> '#ffeead'

• Kết quả của đoạn mã ở trên giống với

Thành phần p
Thành phần div

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); 
--> '#ffeead'

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); 
--> '#ffeead'

• Được hỗ trợ trực tiếp bởi trình duyệt, không phải biên dịch.

Thành phần p
Thành phần div

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ì.

Thành phần p
Thành phần div

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