Câu hỏi nói lên tất cả.
Ví dụ, nếu tôi đang sử dụng Twitter Bootstrap , tôi có thể xác định các lớp trong biểu định kiểu SASS của riêng mình kế thừa từ các lớp CSS của Bootstrap không? Hay kế thừa trong SASS chỉ hoạt động trong phạm vi của một tệp duy nhất?
Câu trả lời:
ĐÚNG! nó có thể.
Nếu bạn muốn tất cả các <button>phần tử kế thừa .btnlớp từ nút Mặc định của Twitter Bootstrap
Trong styles.scsstệp của bạn, trước tiên bạn sẽ phải nhập _bootstrap.scss:
@import "_bootstrap.scss";Sau đó, bên dưới nhập:
button { @extend .btn; }@extendcùng với bootstrap / bất kỳ khung công tác nào, vì nó có thể không hoạt động như bạn mong đợi. Có một số điều cần phải nhận thức được như đã nêu trong bài viết này: stackoverflow.com/questions/30744625/...
bootstrap.cssvào styles.csshay chỉ .btn? Ý tôi là trong gói đầu ra? Nếu nó nhập khẩu toàn bộ bootstrap.css, nó sẽ tăng kích thước styles.csskhông cần thiết.
** Tôi có thể nhầm, nhưng nếu tôi hiểu được những gì bạn đang cố gắng làm, bạn không thể chỉ sử dụng @extend .classname;lệnh bên trong phần tử mà bạn muốn mở rộng? Đương nhiên, bạn chỉ nên sửa đổi mã của riêng mình để duy trì khả năng cập nhật.
Theo hiểu biết của tôi, bạn phải sử dụng@import tệp chứa các lớp bạn muốn sử dụng vào tệp SASS của mình để sử dụng chúng trong tệp đó. Tuy nhiên, tôi không phải là chuyên gia SASS / SCSS, vì vậy ai đó có thể biết cách khác để sử dụng chúng từ xa mà tôi không biết.
Cũng giống như câu trả lời được chấp nhận đã cho thấy điều này có thể thực hiện được với @import, tuy nhiên @import đã không được sử dụng bởi sass
Nhóm Sass không khuyến khích việc tiếp tục sử dụng quy tắc @import. Sass sẽ dần dần loại bỏ nó trong vài năm tới, và cuối cùng là loại bỏ nó khỏi ngôn ngữ hoàn toàn. Thay vào đó, hãy ưu tiên quy tắc @use.
Quy tắc @use bây giờ phù hợp hơn để sử dụng, vì nó không gây ô nhiễm phạm vi của mô-đun nhập (người dùng). rất tiếc tại thời điểm viết quy tắc sử dụng chỉ được thực hiện trong Dart sass.