Stylus s() & +blok cache mengabaikan pertanyaan media

Saya memperhatikan stylus menerapkan kode +cache saya di blok yang salah. Gaya yang seharusnya hanya ditampilkan pada kueri media tablet malah ditampilkan pada cakupan non-cache.

Sepertinya ada masalah dengan fungsi s() Stylus yang tidak mengenali apakah itu ada di dalam blok media dan hanya mencetak CSS

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

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

Ini campuran kalk saya

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')

Implementasi cache ini disalin dari 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}

Seperti apa CSS yang dihasilkan

.content
    width: 70%;
    width: -webkit-calc(100% - 8.928571428571429em);
    width: -moz-calc(100% - 8.928571428571429em);
    width: -ms-calc(100% - 8.928571428571429em);

Kapan seharusnya

@media (…tablet-size…)
    .content
        width: -webkit-calc…
        …

person Maruf    schedule 19.08.2015    source sumber


Jawaban (2)


Ya ampun, cukup gunakan Rupture untuk pertanyaan media Anda. Saya dapat melihat bahwa Anda mengalami banyak hal luar biasa antara mixin dan fungsinya, tetapi menurut saya apa yang Anda coba lakukan telah diselesaikan dengan pecah. Semoga beruntung!

person Benjamin Gandhi-Shepard    schedule 18.09.2015
comment
Perpustakaan keren, sayangnya tidak ada kacang :( - person Maruf; 18.09.2015
comment
Maaf. Jadi, saya lelah menjalankan kode menggunakan learnboost.github.io/stylus/try.html tetapi tidak menghasilkan apa pun. Apakah ada hal lain yang diperlukan untuk menjalankan kode? - person Benjamin Gandhi-Shepard; 19.09.2015
comment
Terima kasih atas upayanya tetapi ternyata, ini adalah masalah yang sudah diperbaiki dan hanya terkait dengan Stylus 0.49.x - person Maruf; 20.09.2015

Ini adalah masalah yang sudah diperbaiki dan hanya terkait dengan Stylus 0.49.x yang digunakan oleh grunt-contrib-stylus versi sebelumnya. Memperbarui stylus grunt ke versi 0.21.0 telah memperbaiki masalah ini

person Maruf    schedule 20.09.2015