Khi mở rộng một bộ chọn với @extendchỉ thị, Sass không lấy nội dung CSS từ bộ chọn mở rộng để đưa nó vào bộ chọn mở rộng. Nó hoạt động theo cách khác. Nó có bộ chọn mở rộng và nối nó vào bộ chọn mở rộng.
Do cách thức hoạt động của nó, nó làm cho nó không thể sử dụng nó từ các phạm vi khác nhau. Ví dụ: bạn không thể mở rộng trình giữ chỗ đã được khai báo trong một @mediakhối, cũng như bạn không thể mở rộng trình giữ chỗ từ gốc nếu bạn đang ở trong một lệnh @media.
Chắc chắn rằng chúng ta có thể tìm ra cách sử dụng @extendkhi có thể, nếu không thì hãy mixin. Thật vậy, nó có thể làm được nhưng nó hơi phức tạp, tôi gọi đây là hack mixtend. Bạn có thể muốn suy nghĩ kỹ trước khi thực hiện ở mọi nơi trong dự án của mình. Có lẽ chỉ sử dụng mixin sẽ dễ dàng hơn. Tôi sẽ để lại cho bạn thẩm phán của điều đó.
Gói @extend
Ý tưởng này thực sự khá đơn giản để nắm bắt. Đầu tiên chúng tôi xác định mixin. Tham số duy nhất là $extend, xác định xem liệu mixin có nên thử mở rộng hơn là bao gồm hay không. Rõ ràng, nó là một boolean (mặc định là true).
Nếu $extendcó true, chúng tôi mở rộng trình giữ chỗ được đặt tên theo mixin (rất tiếc, điều này không được tính toán tự động). Nếu có false, chúng tôi kết xuất mã CSS như cách mixin thông thường sẽ làm.
Ngoài mixin, chúng tôi xác định trình giữ chỗ đã nói ở trên. Để tránh lặp lại mã CSS trong trình giữ chỗ, chúng tôi chỉ phải bao gồm mixin bằng cách thiết lập $extendđể falsenó kết xuất mã CSS trong lõi của trình giữ chỗ.
/// *Mixtend* hack /// @author Hugo Giraudel @mixin mixtend-boilerplate($extend: true) ( @if $extend ( @extend %mixtend-boilerplate-placeholder; ) @else ( // Mixtend content ) ) %mixtend-boilerplate-placeholder ( @include mixtend-boilerplate($extend: false); )Thí dụ
Ví dụ đơn giản, chúng tôi sẽ sử dụng micro-clearfix từ Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Sử dụng nó khá đơn giản:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Kết quả CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Đoạn mã văn bản tuyệt vời
Nếu bạn muốn lưu bảng soạn sẵn để làm cho nó có thể tái sử dụng cao, bạn sẽ rất vui khi biết rằng rất dễ dàng để tạo một đoạn văn bản Sublime cho việc này. Trong Sublime, đi tới Công cụ> Đoạn mã mới… và dán nội dung bên dưới.
Hãy thay đổi chìa khóa để đặt bất cứ thứ gì làm nổi con thuyền của bạn; đó là từ cần nhập trước khi nhấn tabđể mở rộng đoạn mã. Tôi đã đi với mixtend.
mixtend source.scss