Làm cách nào để chỉ nhập các biến và kết hợp từ bảng định kiểu Scss?

Question

Tôi đang sử dụng khung công tác CSS của Zurb Foundation 4 (S) và tôi đang gặp phải vấn đề về phong cách được sao chép ồ ạt. Điều này là do trong mỗi tệp mà tôi @import 'foundation' in, tất cả các kiểu từ Foundation cũng được nhập (quy tắc cho body, .row, .button và bạn bè). Điều này dẫn đến thời gian biên dịch SCSS dài và khó điều hướng trong bảng điều khiển dành cho nhà phát triển web trong Chrome, vì tất cả các kiểu của Zurb được khai báo bốn hoặc năm lần.

Để giảm thiểu điều này, tôi đã tạo một tệp scss globals, chứa các biến có thể ghi đè mà Foundation sử dụng (được sao chép từ foundation_and_overrides.scss, sau đó là foundation_and_overrides globals nhập khẩu). Chỉ nhập tệp globals.scss chỉ để loại bỏ trùng lặp trong các tệp không sử dụng mixin Foundation.

Đó là trong các tệp sử dụng hỗn hợp Foundation: Tôi có thể nhập chỉ các tệp mix từ một tệp SCSS mà không nhập các kiểu Foundation cụ thể không?

Answer 1

Nhập khẩu là tất cả hoặc không có gì. Tất cả mọi thứ trong tập tin là những gì bạn nhận được. Tuy nhiên, nếu bạn xem xét nguồn gốc của Foundation, có các biến mà bạn có thể sửa đổi sẽ ngăn chặn các kiểu phát ra (ví dụ: buttons, đặt $include-html-button-classes thành false sẽ vô hiệu hóa kiểu). Mẫu thiết kế này là nền tảng cụ thể, bạn không thể mong đợi các thư viện khác được tác giả theo cách này.

Khi bạn nhập nền tảng qua @import "foundation", bạn đang nhập tệp này: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. Như bạn có thể thấy, nó sẽ nhập các tệp khác. Bạn không phải nhập tệp này nếu bạn không cần mọi thứ: chỉ cần nhập tệp cụ thể bạn muốn (ví dụ: @import 'foundation/components/side-nav' chỉ dành cho tệp điều hướng bên cạnh).