스타일러스 : 미디어 태그가 문자열을 해석하지 못하게합니다.

Question

우리는 흥미로운 딜레마가 있습니다.

무 충돌 모드를 추가하기 위해 내보내는 함수에 네임 스페이스를 사용하기 위해 을 열고 rupture project을 엽니 다.

먼저에게 배우

는 landscape 및 portrait 명명 된 두 개의 함수 (또는 유지 mixin)이 있습니다. PR 네임 스페이스는 이들을 rupture-landscape 및 rupture-portrait에 위치시킵니다. 전체적으로 @media mixin이 사용됩니다.

이제 장면이 있습니다.

rupture로 만든 함수 중 일부는 문자열을 조합하여 미디어 태그와 함께 사용합니다. 최종 결과는 일반적인 CSS 미디어 쿼리 여야합니다.

스타일러스 @media mixin에 문제가 있습니다. 그것은 자동으로 문자열을 해석하고 범위에 존재할 수있는 키워드를 확장하려고 시도하는 것 같습니다.

@media 태그가 composed string 및 orientation: portrait 또는 orientation: landscape와 함께 사용 지금까지 결과는 앞에 두 단어 portrait 및 rupture와 landscape 것 노 갈등 모드를 사용하지 않을 때는 가로 및 세로 모두이 범위 내이기 때문에.

나는 codepen here에서이 문제를 해결하기위한 몇 가지 시도로 간단한 예제를 만들었습니다. 여기

뿐만 아니라 코드 :

스타일러스

$landscape = 'notlandscape' 
$string = "only screen and (orientation landscape)" 
$unquote = unquote($string) 
$s = s($string) 

.foo 
    // this is the main issue 
    @media $string 
    color: blue 
    These two are attempts to fix the issue 
    @media $unquote 
    color: blue 
    @media $s 
    color: blue 

하고 CSS에서 컴파일 결과

가

@media only screen and (orientation: 'notlandscape') { 
    .foo { 
    color: #00f; 
    } 
} 
@media only screen and (orientation: 'notlandscape') { 
    .foo { 
    color: #00f; 
    } 
} 
@media only screen and (orientation: 'notlandscape') { 
    .foo { 
    color: #00f; 
    } 
} 

실제 원하는 출력 :

@media only screen and (orientation: landscape) { 
    .foo { 
    color: #00f; 
    } 
} 

가 거기 길 이 행동을 막거나 우회 하는가?

Answer 1

interpolation을 사용해보세요. 참조 된 @media 페이지에는 자세한 정보와 예제를 제공하는 Interpolations and variables에 대한 섹션도 있습니다. codepen

괄호 @ 라이브

landscape = 'notlandscape' 
$string = "only screen and (orientation landscape)" 

.foo 
    @media ({$string}) 
    color: blue 

여기에 필수적이다. 그래서 정확히 원하는 결과는 아니지만 유효한 CSS입니다. 이를 피하는 방법 (또는 필요한 경우)은 유스 케이스에 따라 다릅니다. 하나 개의 아이디어 :

landscape = 'notlandscape' 
$string = "orientation: landscape" 

.foo 
    @media only screen and ({$string}) 
    color: blue 

라이브