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…
…