起初我尝试了这个但它似乎没有效果。
$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
为什么我不能使用上述技术?
答案 0 :(得分:4)
因为在第一种情况下,这些变量被解析为占位符选择器(参见http://learnboost.github.io/stylus/docs/extend.html#extending-placeholder-selectors)。