Stylus s() & +缓存块忽略媒体查询

Question

我注意到手写笔在错误的块中应用了我的 +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…
        …

Answer 1

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

Answer 2

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

Stylus s() & +缓存块忽略媒体查询

Stylus s() & +cache blocks ignore media queries

css

media-queries

stylus