IBZ
97
2018-11-26 11:10:59
6
1996

SCSS에서 미디어 쿼리 중복 생성을 없앨 수 없나요?


SCSS로 미디어 쿼리를 작성하고 있는데요

밑에처럼 @mixin 안에 미디어 쿼리를 넣고 각 클래스들 속에서 @include로 불러오는 방식을 쓰고 있습니다

@mixin mobile {
  @media all and (min-width: 400px) {
    @content;
  }
}
// 모바일 쿼리

.foo {
  @include mobile {
    color: red;
  }
}
.bar {
  @include mobile {
    color: blue;
  }
}


그런데 이게 CSS로 컴파일 될 때 클래스 안에서 선언한 @include의 갯수만큼 미디어 쿼리가 복사 되어버리네요

@media all and (min-width: 400px) {
  .foo {
    color: red; } }

@media all and (min-width: 400px) {
  .bar {
    color: blue; } }


제가 원하는건 컴파일된 CSS에서 밑에처럼 @mixin mobile이 하나만 생성되고 그 안에 클래스들이 다 들어가게끔 만들고 싶습니다

@media all and (min-width: 400px) {
  .foo {
    color: red; } 
  .bar {
    color: blue; } 
}


뭔가 방법이 없을까요?


0
  • 답변 6

  • 니플
    2018-11-26 11:23:47 작성 2018-11-26 11:31:19 수정됨

    http://megaton111.cafe24.com/2017/01/13/sass-문법-불러오기import-상속extend-믹스인mixin/

    mixin, 상속(extend), placeholder selectors을 이용하면 됩니다.


  • IBZ
    97
    2018-11-26 12:48:16

    이걸로는 정확히 뭘 말씀하시려는건지 모르겠습니다. 설마 모든 값들을 전부 다 placeholder화 시키라는건가요?


    좀더 자사히 알려주시면 감사하겠습니다

  • Soonpyo
    112
    2018-11-26 13:03:55


    @mixin mobile {
      @media all and (min-width: 400px) {
        @content;
      }
    }
    // 모바일 쿼리
    @include mobile {
      .foo {
        background: blue;
      }
      .bar {
        background: red;
      }
    }

    굳이 mixin을 css selector 내부에만 쓸필요가 없지않을까요?

  • IBZ
    97
    2018-11-26 13:16:24 작성 2018-11-26 13:16:44 수정됨

    네스팅화시키지 않으면 코드가 조금 길어질거 같아서요. 다른 방법ㅇ ㅣ있다면 알려주실수 있을까요?

  • 니플
    2018-11-26 13:35:22

    https://stackoverflow.com/questions/15079280/accessing-an-array-key-in-sass

    이렇게 배열로 선언해서 for-in으로 선언하는 것을 어떨까요?

  • Soonpyo
    112
    2018-11-26 14:25:20

    https://github.com/sass/sass/issues/116

    sass자체의 내부기능은 논의되었으나 최종적으로 내부기능에서 최적화는 안하는쪽으로 결정이 난듯합니다.

    그외에 여러가지 솔루션이 있겠지만 webpack이나 gulp 같이 빌드도구랑 같이사용하신다면 아래와 같은 전처리후에 css를 최적화시켜주는 툴도 고려해보시는게 좋을것같습니다.

    https://github.com/iamvdo/pleeease/



  • 로그인을 하시면 답변을 등록할 수 있습니다.