Sass의 미디어 쿼리 내에서 선택기를 어떻게 확장할 수 있나요?

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

Sass로 작업할 때 미디어 쿼리 내에서 선택기를 확장해야 하는 경우가 종종 있습니다. 이는 크기나 방향에 따라 요소에 다양한 스타일을 적용하는 데 유용할 수 있습니다. 그러나 Sass에는 미디어 쿼리 내에서 외부 선택기를 확장할 수 없다는 제한 사항이 있습니다.

제공된 코드 예제에서:

<code class="scss">.item { ... }
.item.compact { /* styles to make .item smaller */ }

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

이 접근 방식은 Sass가 구성할 수 없기 때문에 오류가 발생합니다. 당신을 위한 선택기. 특히 미디어 쿼리 내부에 있을 수 없으며 쿼리 외부에 있는 것을 확장할 수 없습니다.

대체 접근 방식

이러한 제한으로 인해 여러 가지 대안이 있습니다.

믹스인 사용

믹스인 및 확장 클래스를 생성하여 미디어 쿼리 내외에서 코드를 재사용:

<code class="scss">@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

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

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

선택기 확장 외부에서

주어진 사용 사례에 직접 적용할 수는 없지만 이 방법을 사용하면 외부에서 미디어 쿼리 내의 선택기를 확장할 수 있습니다.

<code class="scss">%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

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

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

.bar {
  @extend %bar;
}</code>

진행 중인 토론

Sass 커뮤니티에서는 이 제한 사항에 관해 활발한 토론이 진행되고 있습니다. 사용자들은 이 기능에 대한 욕구를 표명했으며 관리자들은 이를 효과적으로 구현하는 방법을 고려하고 있습니다. 그러나 아직까지 확실한 해결책은 나오지 않았습니다.

위 내용은 Sass의 미디어 쿼리 내에서 선택기를 어떻게 확장할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!