Sass 미디어 쿼리에서 선택기를 확장하는 방법은 무엇입니까?

Sass를 사용하여 미디어 쿼리에서 선택기 확장

질문:

. 화면이 축소되면 .item.compact 내의 항목이 있지만 @media를 사용하여 확장하려고 하면 Sass에서 오류가 발생합니다. 스타일을 재현하지 않고 어떻게 이를 달성할 수 있습니까?

답변:

불행히도 Sass는 미디어 쿼리 내에서 외부 선택기를 확장하는 것을 금지합니다. 제한으로 인해 대체 접근 방식이 필요합니다.

1. 믹스인 사용:

원하는 스타일을 캡슐화하는 재사용 가능한 믹스인을 정의하세요. 미디어 쿼리 내부와 외부 모두에서 이 믹스인을 확장합니다.

@mixin compact {
    // Styles for compact items
}

%compact {
    @include compact;
}

// Usage
.item {
    @extend %compact;
}

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

2. 미디어 쿼리 내에 확장기 중첩:

이 접근 방식을 사용하면 미디어 쿼리 외부에서 정의된 선택기를 확장할 수 있습니다.

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

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

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

.bar {
  @extend %bar;
}

3. Sass 업데이트 대기 중:

이 제한 사항에 관한 논의가 진행 중입니다. 솔루션을 구현하려면 Sass 구문이나 기능을 변경해야 할 수도 있습니다.

위 내용은 Sass 미디어 쿼리에서 선택기를 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!