css - Stylus s() & +cache blocks ignore media queries -
i noticing stylus applying +cache code in incorrect block. styles supposed display on tablet media queries gets displayed instead on non-cached scope.
it looks issue stylus' s()
function not recognizing if it's inside media block , printing out css
// styles .content width 70% // mobile devices +media('sm') // tablet devices width calc('100% - ' + em($photo-size))
here calc mixin
calc() if current-property 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 used within property')
this cache implementation copied on http://kizu.ru/en/issues/new-stylus-features/
// mixin caching blocks given conditions media($condition) helper($condition) unless $media_cache[$condition] $media_cache[$condition] = () push($media_cache[$condition], block) +helper($condition) {selector() + ''} {block} // function use call cached styles apply_media_cache() $media, $blocks in $media_cache $media = unquote($media_aliases[$media] || $media) $media = '(%s)' % $media unless match('\(', $media) $media = 'only screen , %s' % $media @media $media $block in $blocks {$block}
the outputted css looks like
.content width: 70%; width: -webkit-calc(100% - 8.928571428571429em); width: -moz-calc(100% - 8.928571428571429em); width: -ms-calc(100% - 8.928571428571429em);
when should be
@media (…tablet-size…) .content width: -webkit-calc… …
dewd, use rupture media queries. can see have kinds of awesome things going on between mixin , function, think you're trying has been solved rupture. luck!
Comments
Post a Comment