2015-08-19 2 views
0

Я замечаю, что стилус применяет мой код + кеша в неправильном блоке. Стили, которые должны отображаться только в запросах на планшетный носитель, отображаются вместо этого в не кешированной области.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… 
     … 

ответ

0

Это уже проблема, связанная только с Stylus 0.49.x, которая используется предыдущей версией стирания grunt-contrib-stylus. Обновление стирания grunt до версии 0.21.0 устраняло проблему

0

Dewd, просто использовать Rupture для ваших медиа-запросов. Я вижу, что у вас есть всевозможные потрясающие вещи между этим миксином и функцией, но я думаю, что то, что вы пытаетесь сделать, уже было разрешено разрывом. Удачи!

+0

Прохладная библиотека, к сожалению, нет бобы :( – Maruf

+0

Извините. Итак, я устал стрелять кодом, используя https://learnboost.github.io/stylus/try.html но ничего не выводит. Есть ли что-то еще для запуска кода? –

+0

Спасибо за попытку, но, как оказалось, это уже проблема, связанная только с Stylus 0.49.x – Maruf

Смежные вопросы