Я замечаю, что стилус применяет мой код + кеша в неправильном блоке. Стили, которые должны отображаться только в запросах на планшетный носитель, отображаются вместо этого в не кешированной области.Stylus s() & + cache blocks игнорируют медиа-запросы
Похоже, вопрос со стилусом s()
функция не распознает, если он находится внутри блока СМИ и просто распечатав CSS
// styles
.content
width 70% // mobile devices
+media('sm') // tablet devices
width calc('100% - ' + em($photo-size))
Вот мой известково Mixin
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…
…
Прохладная библиотека, к сожалению, нет бобы :( – Maruf
Извините. Итак, я устал стрелять кодом, используя https://learnboost.github.io/stylus/try.html но ничего не выводит. Есть ли что-то еще для запуска кода? –
Спасибо за попытку, но, как оказалось, это уже проблема, связанная только с Stylus 0.49.x – Maruf