Tôi có một lớp mục và một lớp "sửa đổi" nhỏ gọn:

.item { ... }
.item.compact { /* styles to make .item smaller */ }

Điều này là tốt. Tuy nhiên, tôi muốn thêm một @mediatruy vấn buộc .itemlớp phải nhỏ gọn khi màn hình đủ nhỏ.

Theo suy nghĩ đầu tiên, đây là những gì tôi đã cố gắng làm:

.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
  .item { @extend .item.compact; }
}

Nhưng điều này tạo ra lỗi sau:

Bạn không thể @ tạo bộ chọn bên ngoài từ bên trong @media. Bạn chỉ có thể @extend các bộ chọn trong cùng một chỉ thị.

Làm cách nào để thực hiện điều này bằng SASS mà không cần phải sử dụng đến các kiểu sao chép / dán?

Câu trả lời đơn giản là: bạn không thể vì Sass không thể (hoặc sẽ không) soạn bộ chọn cho nó. Bạn không thể ở bên trong truy vấn phương tiện và mở rộng thứ gì đó ra bên ngoài truy vấn phương tiện. Chắc chắn sẽ rất tuyệt nếu nó chỉ cần lấy một bản sao của nó thay vì cố gắng soạn các bộ chọn. Nhưng nó không phải vì vậy bạn không thể.

Sử dụng hỗn hợp

Nếu bạn gặp trường hợp đang sử dụng lại một khối mã bên trong và bên ngoài các truy vấn phương tiện và vẫn muốn nó có thể mở rộng, thì hãy viết cả lớp mixin và lớp mở rộng:

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}

Mở rộng bộ chọn trong một truy vấn phương tiện từ bên ngoài

Điều này sẽ không thực sự giúp ích cho trường hợp sử dụng của bạn, nhưng nó là một tùy chọn khác:

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}

Chờ cho đến khi Sass gỡ bỏ hạn chế này (hoặc tự vá nó)

Có một số cuộc thảo luận đang diễn ra liên quan đến vấn đề này (vui lòng không đóng góp vào các chủ đề này trừ khi bạn có điều gì đó có ý nghĩa để thêm vào: những người bảo trì đã biết rằng người dùng mong muốn chức năng này, nó chỉ là một câu hỏi về cách triển khai nó và những gì cú pháp nên).

• https://github.com/sass/sass/issues/1050
• https://github.com/sass/sass/issues/456

Đối với hồ sơ, đây là cách tôi đã giải quyết vấn đề với chỉ sao chép các kiểu đã tạo một lần:

// This is where the actual compact styles live
@mixin compact-mixin { /* ... */ }

// Include the compact mixin for items that are always compact
.item.compact { @include compact-mixin; }

// Here's the tricky part, due to how SASS handles extending
.item { ... }
// The following needs to be declared AFTER .item, else it'll
// be overridden by .item's NORMAL styles.
@media (max-width: 600px) {
  %compact { @include compact-mixin; }

  // Afterwards we can extend and
  // customize different item compact styles
  .item {
    @extend %compact;
    /* Other styles that override %compact */
  }
  // As shown below, we can extend the compact styles as many
  // times as we want without needing to re-extend
  // the compact mixin, thus avoiding generating duplicate css
  .item-alt {
    @extend %compact;
  }
}

Tôi tin rằng SASS / SCSS không hỗ trợ lệnh @extendbên trong truy vấn phương tiện. http://designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do/

Thay vào đó, bạn có thể cần phải sử dụng một mixin, mặc dù mã phồng cần được cân nhắc với mục tiêu của bạn.

Đây là giải pháp từng phần, sạch nhất mà tôi đã tìm thấy. Nó tận dụng @extend nếu có thể và quay trở lại mixin khi bên trong các truy vấn phương tiện.

Truy vấn đa phương tiện @extend Directives trong Sass

Xem bài viết để biết chi tiết đầy đủ nhưng ý chính là bạn gọi mixin 'placeholder', sau đó sẽ quyết định xuất ra @extend hay @include.

@include placeholder('clear') {
   clear: both;
   overflow: hidden;
}

.a {
    @include _(clear);
}
.b {
    @include _(clear);
}
.c {
    @include breakpoint(medium) {
      @include _(clear);
   }
}

Cuối cùng, nó có thể không tốt hơn là chỉ sử dụng mixin, đây là câu trả lời được chấp nhận.

Tôi sử dụng các điểm ngắt, nhưng cùng một ý tưởng:

@mixin bp-small {
    @media only screen and (max-width: 30em) {
        @content;
    }

Làm thế nào để sử dụng nó:

.sidebar {
    width: 60%;
    float: left;
    @include bp-small {
        width: 100%;
        float: none;
    }
}

Có một văn bản về mixin nơi bạn có thể tìm hiểu thêm về tùy chọn này.

Bạn có thể cơ cấu lại?

.compact { //compact-styles }
.item {}
.item.compact { @extend .compact } 

@media (max-width: 600px) {
    .item { @extend .compact; }
}

Nếu tôi hiểu tài liệu một cách chính xác, điều đó sẽ hoạt động. Tôi nghĩ rằng lý do mà cách bạn đang thử không hoạt động là nó không thấy .item.compact khi nó phân tích cú pháp @extend, nhưng đó là một phỏng đoán thiếu hiểu biết, vì vậy hãy chấp nhận điều đó với một đống muối tải! :)