SASS과 미디어 쿼리 집계

, 나는 다음과 믹스 인을 가지고SASS과 미디어 쿼리 집계

@mixin ss($property, $value, $value-smallscreen) { 
    #{$property}: $value; 
    @media screen and (max-height: $smallscreen-maxheight) { 
    #{$property}: $value-smallscreen; 
    } 
} 

.Header 
{ 
    @include ss('height', $RowHeight, $RowHeight-smallscreen); 
    @include ss('font-size', $HeaderFontsize, $HeaderFontsize-smallscreen); 
}

나는이 두 @media 문을 생성하는 것입니다 가지고있는 '문제'.

스타일이 큰 두 추가되는 것을 보장하기 위해, 함께 정의를 유지 :

.Header { 
    height: 41px; 
    font-size: 11pt; } 
    @media screen and (max-height: 768px) { 
    .Header { 
     height: 35px; } } 
    @media screen and (max-height: 768px) { 
    .Header { 
     font-size: 9pt; } }

, 모두 어떤 방법 내가 알고 싶은이있다 : 즉, 다음과 같은 CSS를 생성한다 작은 화면 및

'@ 미디어'섹션 만 있습니다. 나의 현재 프로젝트의

출처

2014-12-07 Paul Wagland

가능한 복제본 [SASS 및 중단 점 (응답)]을 사용하여 미디어 쿼리 병합 (http://stackoverflow.com/questions/17478693/merging-media-queries-using-sass-and-breakpoint-respond-) – cimmanon

@cimmanon 여러 미디어 쿼리가 있다는 것을 알고 있기 때문에 나는 이것이 중복 된 것이라고 생각하지 않습니다. 거기에 대한 대답은 "다중 생성하지 마십시오"입니다. 내 질문은 "SASS에서 정의를 복제하지 않고 다중을 작성하지 않는 방법이 있습니까?"입니다. –

하나는 SASS 구조에이 방법을 필요로하고, 내 솔루션은 SASS/나침반을 출력으로 CSS 파일을 볼 수 Pleeease 같은 CSS 포스트 프로세서를 사용하여 CSS 출력을 볼 수있다.

이렇게하면 다른 최적화 중에서 라이브 미디어 쿼리를 패킹 할 수 있습니다.

출처

2014-12-08 14:19:49 BurpmanJunior

감사합니다. 나는 이런 종류의 사후 처리 단계를 조사 할 것이다. 나는 그것을 피하기를 희망했지만, 아마도 그것이 최선의 해결책이다. –

SASS과 미디어 쿼리 집계

답변

관련 문제