如何在Stylus中为媒体查询编写变量？

Question

起初我尝试了这个方法，但似乎并没有起作用。

$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

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

- Shak Daniel

---

我已经编辑了我的问题，希望这样问更好。 - Shak Daniel

Answer 1

因为在您的第一个情况中，这些变量被解析为占位符选择器（请参见http://learnboost.github.io/stylus/docs/extend.html#extending-placeholder-selectors）。

- Panya

---

谢谢，不知道我在 Stylus 文档中是怎么错过了那一点。我想我会坚持我的第二个选择。 - Shak Daniel