Я заметил, что стилус применяет мой код +cache в неправильном блоке. Стили, которые должны отображаться только в мультимедийных запросах планшета, вместо этого отображаются в некэшированной области.
Похоже, проблема в том, что функция Stylus s()
не распознает, находится ли она внутри медиаблока, и просто распечатывает CSS.
// styles
.content
width 70% // mobile devices
+media('sm') // tablet devices
width calc('100% - ' + em($photo-size))
Вот мой кальк миксин
calc()
if current-property
for prefix in vendors
arguments = unquote(arguments)
add-property(current-property[0], s('-%s-calc(%s)', prefix, arguments))
s('calc(%s)', arguments)
else
error('calc() must be used within a property')
Эта реализация кеша была скопирована с http://kizu.ru/en/issues/new-stylus-features/
// Mixin for caching the blocks with the given conditions
media($condition)
helper($condition)
unless $media_cache[$condition]
$media_cache[$condition] = ()
push($media_cache[$condition], block)
+helper($condition)
{selector() + ''}
{block}
// Function we would use to call all the cached styles
apply_media_cache()
for $media, $blocks in $media_cache
$media = unquote($media_aliases[$media] || $media)
$media = '(%s)' % $media unless match('\(', $media)
$media = 'only screen and %s' % $media
@media $media
for $block in $blocks
{$block}
Выведенный CSS выглядит так
.content
width: 70%;
width: -webkit-calc(100% - 8.928571428571429em);
width: -moz-calc(100% - 8.928571428571429em);
width: -ms-calc(100% - 8.928571428571429em);
Когда это должно быть
@media (…tablet-size…)
.content
width: -webkit-calc…
…