Stylus s() & +cache 块忽略媒体查询答案

【问题标题】：Stylus s() & +cache blocks ignore media queriesStylus s() & +cache 块忽略媒体查询
【发布时间】：2015-08-19 14:41:58
【问题描述】：

我注意到手写笔在错误的块中应用了我的 +cache 代码。应该只在平板媒体查询上显示的样式被显示在非缓存范围上。

Stylus 的s() 函数似乎存在问题，无法识别它是否在媒体块内，只是打印出 CSS

// styles
.content
    width 70% // mobile devices

    +media('sm') // tablet devices
        width calc('100% - ' + em($photo-size))

这是我的 calc 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…
        …

【问题讨论】：

标签： css media-queries stylus

【解决方案1】：

Dewd，只需使用Rupture 进行媒体查询。我可以看到您在该 mixin 和函数之间发生了各种令人敬畏的事情，但我认为您正在尝试做的事情已经通过破裂解决了。祝你好运！

【讨论】：

很酷的库，可惜没有 bean :(
对不起。所以，我厌倦了使用learnboost.github.io/stylus/try.html 启动代码，但它不会输出任何东西。运行代码还需要其他什么吗？
感谢您的尝试，但事实证明，这是一个已经修复的问题，仅与 Stylus 0.49.x 相关

【解决方案2】：

这是一个已经解决的问题，仅与之前版本的 grunt-contrib-stylus 使用的 Stylus 0.49.x 相关。将 grunt stylus 更新到 0.21.0 版本修复了该问题

【讨论】：