如何在手写笔中为媒体查询编写变量?

时间:2015-01-14 07:19:40

标签: css css3 media-queries stylus

起初我尝试了这个但它似乎没有效果。

$medium = '@media screen and (min-width: 768px)'
$large = '@media screen and (min-width: 992px)'
$xlarge = '@media screen and (min-width: 1200px)'

.box
    background: #000
    $medium
        background: #111
    $large
        background: #222
    $xlarge
        background: #333

然后我用它并且它有效。

medium = 'screen and (min-width: 768px)'
large = 'screen and (min-width: 992px)'
xlarge = 'screen and (min-width: 1200px)'

.box
    background: #000
    @media medium
        background: #111
    @media large
        background: #222
    @media xlarge
        background: #333

为什么我不能使用上述技术?

1 个答案:

答案 0 :(得分:4)

因为在第一种情况下,这些变量被解析为占位符选择器(参见http://learnboost.github.io/stylus/docs/extend.html#extending-placeholder-selectors)。