Stylus: запретить использование тега для средств массовой информации для интерпретации строк

Question

У нас есть интересная дилемма.

У меня есть PR, открытый для rupture project, для пространства имен функций, которые он экспортирует, чтобы добавить режим без конфликтов.

Во-первых актеры

Есть две функции (или) Примеси, которые названы landscape и portrait. PR-имена помещают их в rupture-landscape и rupture-portrait. Смеситель @media используется повсюду.

А теперь сцена.

С некоторыми из функций, созданных разрыва, строка собирается использоваться с тэгом медиа. Конечным результатом должен быть обычный запрос css media.

Проблема заключается в перемещении стилуса @media. Кажется, он автоматически пытается интерпретировать строку и расширять любые ключевые слова, которые могут существовать в области.

Так как пейзаж и портрет находится в пределах объема, когда не используя не-конфликтной-режима, когда когда-либо @media используется тег с composed string и orientation: portrait или orientation: landscape результатом будет префиксом оба словами portrait и landscape с rupture.

Я создал тривиальный пример с парой попыток исправить проблему на codepen here.

Вот код, а также:

Stylus

$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, который предоставит больше информации и примеров.

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

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

Live @codepen

скобки имеет важное значение здесь. Так что это не совсем точный результат, но он по-прежнему действителен CSS. Как избежать этого (или если это необходимо) зависит от варианта использования. Одна из идей:

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

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

Live @codepen