Tự động hóa Bộ chọn con thứ n với Mixins Family.scss
Sass là cách tốt nhất để quản lý CSS hiện đại và thư viện mixin có thể tiết kiệm nhiều thời gian hơn trong chu kỳ phát triển.
Những mixin này hoạt động như mã hoặc chức năng tự động mà bạn gọi trong các tệp Sass chính của bạn. Một số mixin nói chung hơn trong khi một số khác lại rất cụ thể như Thư viện Family.scss.
Thư viện miễn phí này cung cấp 26 hỗn hợp để chạy phức tạp : con thứ bộ chọn mà không cần ghi nhớ tất cả mã đó.
Hầu hết các nhà phát triển biết về : con thứ bộ chọn và theo mặc định, nó chắc chắn không phức tạp. Bạn đơn giản vượt qua một bộ chọn số, ví dụ : con thứ n (2) trong đó các quy tắc kiểu thuộc về áp dụng cho mọi phần tử con thứ hai của phần tử cha.
Tuy nhiên, điều này có thể phức tạp hơn nhiều khi bạn muốn chọn yếu tố năng động (chẳng hạn như đầu tiên & cuối cùng) hoặc khi bạn muốn chọn một một số ít các yếu tố (chẳng hạn như ba đứa trẻ đầu tiên).
Đây là nơi Family.scss có thể giúp đỡ. Đó là một thư viện rất nhỏ và nó chứa 26 giải pháp cho các bộ chọn con từ cơ bản đến siêu phức tạp. Mỗi mixin có một bản demo trên trang chủ, bạn có thể duyệt và lọc khi cần.
Đây là một số ví dụ thú vị để thể hiện những gì thư viện này có thể làm:
sau đầu tiên (5)- chọn tất cả các yếu tố sau 5 đứa trẻ đầu tiêntừ cuối (3)- chọn phần tử con thứ 3 đến cuối cùngtất cả nhưng (3)- chọn tất cả trẻ em ngoại trừ thứ 3chẵn giữa (3, 12)- chọn tất cả trẻ em chẵn giữa các yếu tố thứ 3 và 12
Có hàng tá bạn có thể duyệt qua và mỗi người đều có bản demo để giúp bạn hình dung cách họ làm việc.
Một vài mixin tiên tiến dựa vào truy vấn số lượng chọn các yếu tố đó là “ít nhất” hoặc là “nhất” cố định đến một phạm vi nhất định. Ví dụ: bạn có thể chọn tất cả trẻ em cho các thành phần cha mẹ có ít nhất 5 con (hoặc nhiều hơn).
Những ý tưởng này có thể gây nhầm lẫn khi đọc về chúng nhưng bản demo sống thực sự làm cho tất cả rõ ràng.
Để đào sâu, bạn có thể tải về một bản sao của thư viện mixin này từ repo GitHub, cùng với tất cả các bản demo này. Và, bạn có thể chia sẻ suy nghĩ hoặc câu hỏi của mình với người tạo dự án trên Twitter @LukyVJ.
