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


88

항목 클래스와 컴팩트 "수정 자"클래스가 있습니다.

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

이건 괜찮아. 그러나 화면이 충분히 작을 때 클래스를 압축하도록 하는 @media쿼리 를 추가하고 싶습니다 .item.

처음 생각했을 때, 이것이 제가 시도한 것입니다.

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

그러나 이것은 다음과 같은 오류를 생성합니다.

@media 내에서 외부 선택기를 @extend 할 수 없습니다. 동일한 지시문 내에서만 @extend 선택기를 사용할 수 있습니다.

스타일을 복사 / 붙여 넣기하지 않고도 SASS를 사용하여이 작업을 수행하려면 어떻게해야합니까?


참고로, 제공 한 예제가 올바르게 작동하도록하는 문제가 있습니다. github.com/sass/sass/issues/1050
Ajedi32

답변:


118

간단한 대답은 Sass가 선택기를 작성할 수 없기 때문에 할 수 없다는 것입니다. 미디어 쿼리 내부에있을 수없고 미디어 쿼리 외부에있는 것을 확장 할 수 없습니다. 선택자를 구성하는 대신 단순히 복사본을 가져 가면 좋을 것입니다. 하지만 그렇게 할 수 없습니다.

믹스 인 사용

미디어 쿼리 내부와 외부에서 코드 블록을 재사용하고 여전히 확장 할 수 있기를 원하는 경우 mixin과 extend 클래스를 모두 작성하십시오.

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

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

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

외부에서 미디어 쿼리 내에서 선택기 확장

이것은 실제로 사용 사례에 도움이되지는 않지만 또 다른 옵션입니다.

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

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

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

.bar {
  @extend %bar;
}

Sass가이 제한을 해제 할 때까지 기다리십시오 (또는 직접 패치하십시오).

이 문제에 대해 계속 논의되고 있습니다 (추가 할 의미있는 내용이없는 한이 스레드에 기여하지 마십시오. 관리자는 사용자가이 기능을 원한다는 것을 이미 알고 있습니다.이 기능을 구현하는 방법과 구문이어야합니다).


@mindeavor 이것은 당신을 위해 일했습니까? 미디어 쿼리에서 확장 클래스를 사용할 수 있었습니까? Sass 3.2에서?
Yahreen 2014 년

1
%foo불필요하며 .foo직접 할 수 있습니다 @include foo.
phil294 jul.

제 경우에는 확장 외부 미디어 쿼리와 함께 % placeholder를 사용했습니다. 그런 다음 미디어 쿼리 내에서 내 선택기에 대해 % placeholder를 확장했습니다. 토론에 편리한 것이 있는지 확인합니다. 감사합니다 Cimmanon.
keypaul

11

기록을 위해 생성 된 스타일을 한 번만 복제하여 문제를 해결 한 방법은 다음과 같습니다.

// 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;
  }
}

2

SASS / SCSS가 @extend미디어 쿼리 내부의 지시문을 지원하지 않는다고 생각 합니다. http://designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do/

대신 믹스 인을 사용해야 할 수도 있지만 코드 부풀림을 목표와 비교해야합니다.


솔루션에 대한 링크는 환영하지만 답변이없는 경우 유용한 지 확인하십시오 . 링크 주변에 컨텍스트를 추가 하여 동료 사용자가 그것이 무엇인지, 왜 거기에 있는지 알 수 있도록 한 다음 페이지에서 가장 관련성이 높은 부분을 인용하십시오. 대상 페이지를 사용할 수없는 경우 다시 연결합니다. 링크에 불과한 답변은 삭제 될 수 있습니다.
dippas

1

이것은 내가 찾은 가장 깨끗하고 부분적인 해결책입니다. 가능한 경우 @extend를 활용하고 미디어 쿼리 내부에서 믹스 인으로 대체합니다.

Sass의 교차 미디어 쿼리 @extend 지시문

자세한 내용은 기사를 참조하십시오. 그러나 요점은 @extend 또는 @include를 출력할지 여부를 결정하는 mixin 'placeholder'를 호출한다는 것입니다.

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

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

궁극적으로 현재 허용되는 대답 인 믹스 인을 사용하는 것보다 낫지 않을 수 있습니다.


0

중단 점을 사용하지만 같은 생각입니다.

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

사용 방법:

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

텍스트 는 더이 옵션에 대한 찾을 수 있습니다 유지 mixin에 대한이.


-2

재구성 할 수 있습니까?

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

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

문서를 올바르게 이해하면 작동합니다. 나는 당신이 시도하는 방식이 작동하지 않는 이유는 @extend를 구문 분석 할 때 .item.compact가 보이지 않기 때문이라고 생각하지만 그것은 무식한 추측이므로 트럭에 소금을 넣으십시오! :)


SASS를 어떻게 컴파일하고 있습니까? 외부 적으로, JS를 사용하거나 일종의 서버 측 구성 요소를 사용합니까?
Jason M. Batchelor 2013

rails-sassSASS v3.2.4를 사용하여 표준 gem을 통해 컴파일되고 있습니다
soundly_typed

1
@media 쿼리 내에서 확장하는 기능이 더 이상 사용되지 않는 것 같습니다. 3.3에서 축약 될 예정입니다. chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released (읽기 영역 " @extendCSS 지시문의 제한 사항 ")
Jason M. Batchelor 2013

해당 정보를 올바르게 이해했다면 문제의 원인 일 수 있습니다. 나는 당신이 무엇을 발견했는지 알고 싶습니다!
Jason M. Batchelor 2013
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.