Question

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

看起来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…
        …

Answer 1

Dewd，只需使用Rupture进行媒体查询即可。我可以看到你在混合和功能之间有各种各样的令人敬畏的事情，但我认为你想要做的事情已经被破裂解决了。祝你好运！

Stylus s（）＆amp; +缓存块忽略媒体查询

1 个答案: