Sass bằng cách nào đó có thể là một hộp đen nhỏ, đặc biệt là đối với các nhà phát triển trẻ: bạn đặt một số thứ vào, bạn sẽ lấy ra một số thứ. Lấy tham chiếu bộ chọn ( &) chẳng hạn, nó hơi đáng sợ.
Điều đó đang được nói, nó không phải như thế này. Chúng ta có thể làm cho cú pháp của nó trở nên thân thiện hơn với hai mixin rất đơn giản.
Sự kiện
Khi viết Sass, bạn thường thấy mình viết những thứ như sau:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Khá tẻ nhạt và không nhất thiết phải dễ đọc. Chúng ta có thể tạo một chút mixin để làm cho nó đơn giản hơn.
/// Event wrapper /// @author Harry Roberts /// @param (Bool) $self (false) - Whether or not to include current selector /// @see https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts @mixin on-event($self: false) ( @if $self ( &, &:hover, &:active, &:focus ( @content; ) ) @else ( &:hover, &:active, &:focus ( @content; ) ) )Viết lại ví dụ trước của chúng tôi:
.my-element ( color: red; @include on-event ( color: blue; ) )Tốt hơn nhiều, phải không?
Bây giờ nếu chúng ta muốn bao gồm chính bộ chọn, chúng ta có thể đặt $selftham số thành true. Ví dụ:
.my-element ( @include on-event($self: true) ( color: blue; ) )Đoạn mã SCSS này sẽ mang lại:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Bối cảnh
Cùng dòng, không có gì lạ khi tạo kiểu một phần tử tùy thuộc vào cha mẹ mà anh ta có. Ví dụ, một cái gì đó như thế này:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Hãy làm cho cú pháp trở nên thân thiện hơn một chút với một mixin đơn giản:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Viết lại ví dụ trước của chúng tôi:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )