SCSS와 같은 "respond-to"기술이 적음

Question

http://css-tricks.com/media-queries-sass-3-2-and-codekit/ 최근에 scss에 대해 읽는 동안이 기술을 발견했습니다. 나는 lesscss를 쓰려고 왔고 차라리 전환하지 않을 것이다. lesscss가 비슷한 기술을 달성하기 위해 어떤 옵션을 가지고 있는지 궁금합니다. 기본 클래스/ID 선언 안에 미디어 쿼리를 작성하는 아이디어를 정말 좋아합니다. 내가 http://blog.scur.pl/2012/06/variable-media-queries-less-css/ 내 유일한 critism 내가 미디어 쿼리가 중복 ARNT 있도록하는 방법을 만들 수있다이 대답을 발견했다

@mixin breakpoint($point) { 
    @if $point == papa-bear { 
    @media (max-width: 1600px) { @content; } 
    } 
    @else if $point == mama-bear { 
    @media (max-width: 1250px) { @content; } 
    } 
    @else if $point == baby-bear { 
    @media (max-width: 650px) { @content; } 
    } 
} 

.page-wrap { 
    width: 75%; 
    @include breakpoint(papa-bear) { width: 60%; } 
    @include breakpoint(mama-bear) { width: 80%; } 
    @include breakpoint(baby-bear) { width: 95%; } 
} 

UPDATE? 이 모든 것을 어떻게 하나의 미디어 쿼리 블록으로 컴파일 할 수 있을까요?

Answer 1

이 기사에 설명 된대로 난 당신이 연결된 쿼리 버블 링을 활용, LESS 내 미디어 쿼리를 수행하는 방법입니다

불행하게도 모든 것이 하나 개의 미디어 쿼리에 아래로 컴파일해야 할 방법이 없지만

@palm : ~"screen and (max-width: 40em)"; 
@lap : ~"screen and (min-width: 50em)"; 
@desk : ~"screen and (min-width: 60em)"; 


.some-class { 
    color: red; 

    @media @lap { 
     color: blue; 
    } 
} 

블록. 이것은 SASS/SCSS의 경우 일 수도 있습니다. 유일한 문제는 파일 크기가 커진다는 것입니다.

그러나 걱정하지 않아도됩니다. 왜? 여러 미디어 쿼리 블록의 반복은 GZIP에 의해 무효화됩니다 (더 많은 반복 == 더 나은 압축). 그래서 서버를 제공하는 것은 GZIP을 사용하여 인코딩하는 것입니다. 대부분의 경우, 가능하지 않으면 사용할 수 있어야하며, 가치가 있습니다.) 파일 크기가 증가하지는 않습니다.

마지막으로 GZIP을 할인하더라도 여전히 하나의 미디어 쿼리 블록으로 컴파일하는 것을 원하지 않습니다. 큰 CSS 코드베이스에서 선택자 옆에 미디어 쿼리가있는 것이 편리하고 유용합니다.