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

Question

SCSS로 미디어 쿼리를 작성하고 있는데요밑에처럼 &#64;mixin 안에 미디어 쿼리를 넣고 각 클래스들 속에서 &#64;include로 불러오는 방식을 쓰고 있습니다&#64;mixin mobile { &#64;media all and (min-width: 400px) { &#64;content; } } // 모바일 쿼리 .foo { &#64;include mobile { color: red; } } .bar { &#64;include mobile { color: blue; } } 그런데 이게 CSS로 컴파일 될 때 클래스 안에서 선언한 &#64;include의 갯수만큼 미디어 쿼리가 복사 되어버리네요 &#64;media all and (min-width: 400px) { .foo { color: red; } } &#64;media all and (min-width: 400px) { .bar { color: blue; } } 제가 원하는건 컴파일된 CSS에서 밑에처럼 &#64;mixin mobile이 하나만 생성되고 그 안에 클래스들이 다 들어가게끔 만들고 싶습니다&#64;media all and (min-width: 400px) { .foo { color: red; } .bar { color: blue; } } 뭔가 방법이 없을까요?

니플 · Answer

http://megaton111.cafe24.com/2017/01/13/sass-문법-불러오기import-상속extend-믹스인mixin/mixin, 상속(extend), placeholder selectors을 이용하면 됩니다.

IBZ · Answer

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

Soonpyo · Answer

&#64;mixin mobile { &#64;media all and (min-width: 400px) { &#64;content; } } // 모바일 쿼리 &#64;include mobile { .foo { background: blue; } .bar { background: red; } }굳이 mixin을 css selector 내부에만 쓸필요가 없지않을까요?

IBZ · Answer

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

니플 · Answer

https://stackoverflow.com/questions/15079280/accessing-an-array-key-in-sass이렇게 배열로 선언해서 for-in으로 선언하는 것을 어떨까요?

Soonpyo · Answer

https://github.com/sass/sass/issues/116sass자체의 내부기능은 논의되었으나 최종적으로 내부기능에서 최적화는 안하는쪽으로 결정이 난듯합니다.그외에 여러가지 솔루션이 있겠지만 webpack이나 gulp 같이 빌드도구랑 같이사용하신다면 아래와 같은 전처리후에 css를 최적화시켜주는 툴도 고려해보시는게 좋을것같습니다.https://github.com/iamvdo/pleeease/

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

6개의 답변

Q&A 목록