我已经尝试了所有方法，但无法让 Stylus CSS 预处理器在媒体查询中使用变量。
例如这不起作用：
t = 1000px
@media screen and (max-width: t)
html
background blue
有人知道怎么做吗？
问问题
10613 次
10 回答
32
看起来 stylus 支持一种更简洁的方式来执行与此拉取请求相同的操作。
在这里，给定一个块大小，我可以制作使容器在页面中居中的样式，并根据浏览器大小将容器大小设置为 1、2 或 3 个块宽。让媒体查询成为一个变量（而不是在媒体查询行中粘贴变量）使其比使用unquote上面提到的方法更干净。
/* in app.styl */
full_block_width = 300px
three_blocks = "all and (min-width: " + 3*full_block_width + ")"
two_blocks = "all and (min-width: " + 2*full_block_width + ") and (max-width: " + (3*full_block_width - 1) + ")"
one_block = "all and (max-width: " + (2*full_block_width - 1) + ")"
.container
margin: auto
@media three_blocks
.container
width: (3*full_block_width)
@media two_blocks
.container
width: (2*full_block_width)
@media one_block
.container
width: full_block_width
于 2013-02-03T01:39:25.377 回答
25
很遗憾，但您不能在媒体查询中使用变量或插值。我昨天偶然发现了类似的任务并提出了这个解决方案：
t = 1000px
unquote("@media screen and (max-width: " + t + ") {")
html
background blue
unquote("}")
这并不漂亮，但它确实有效——unquote实际上，您可以使用它来解决大多数此类 Stylus 问题。
于 2012-10-25T08:18:09.207 回答
6
使用 Stylus 的 0.43.0 版本，支持媒体查询，就像您在示例中使用的那样，或者没有像这样的冒号：
t = 1000px
@media screen and (max-width t)
html
background blue
于 2014-07-15T19:03:07.200 回答
5
这对我有用。
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
于 2015-01-14T13:25:12.490 回答
4
现在支持开箱即用，来自官方页面的片段：
foo = 'width'
bar = 30em
@media (max-{foo}: bar)
body
color #fff
于 2015-05-14T10:01:50.387 回答
3
我写了一个 mixin，虽然它也不完全理想：
// media
media(args...)
output = null
for arg in args
// check for tuple
if arg[1]
push(output,unquote('(%s: %s)' % (arg[0] arg[1])))
else
push(output,unquote(arg))
unquote(s('%s',output))
它可以这样使用：
$_media = media(screen,'and',(min-width $screen-tablet))
@media $_media
.container
max-width 728px
CSS 输出：
@media screen and (min-width: 768px) {
.container {
max-width: 728px;
}
}
于 2013-06-03T17:34:58.097 回答
3
现在应该工作：
t = 1000px
@media screen and (max-width: t)
html
background blue
http://stylus-lang.com/docs/media.html
从文档中：
插值和变量
您可以在媒体查询中使用插值和变量，因此可以执行以下操作：
foo = 'width'
bar = 30em
@media (max-{foo}: bar)
body
color #fff
这将产生
@media (max-width: 30em) {
body {
color: #fff;
}
}
也可以在 MQ 中使用表达式：
.foo
for i in 1..4
@media (min-width: 2**(i+7)px)
width: 100px*i
会屈服于
@media (min-width: 256px) {
.foo {
width: 100px;
}
}
@media (min-width: 512px) {
.foo {
width: 200px;
}
}
@media (min-width: 1024px) {
.foo {
width: 300px;
}
}
@media (min-width: 2048px) {
.foo {
width: 400px;
}
}
于 2015-02-10T19:50:46.950 回答
1
如果我可以提供一种干净易读的方式，我会使用哈希来发挥我的优势，如下所示：
// Custom media query sizes
--query = {
small: "screen and (min-width: 554px)",
medium: "screen and (min-width: 768px)",
large: "screen and (min-width: 992px)",
extra-large: "screen and (min-width: 1200px)",
}
以及我如何称呼它，例如：
.main-logo
font-large(--font.uni-sans-heavy)
position: relative
top: 50px
left: 35px
.logo-first
color: --color.white
margin-right: 3px
.logo-second
color: --color.bright-red
@media --query.large
left: 70px
超级明显，易于阅读。保持美观和简单。
于 2016-05-06T10:56:11.467 回答
0
我喜欢创建一个mediamixin，这样就不必为媒体查询创建一个命名变量：
media(query)
@media query
{block}
使用过程如下：
+media("screen and (min-width:" + width + "), print")
.class
foo: bar
于 2014-10-30T17:51:40.503 回答
0
我喜欢 Tony Tai Nguyen 的回答。这是另一个迭代：
sizes = {
mobile: 0 768
tablet: 769 1023
desktop: 1024 1215
widescreen: 1216 1407
fullhd: 1408 99999999
}
query = {}
for name, pxs in sizes
min = '(min-width:' + pxs[0] + 'px)'
max = '(max-width:' + pxs[1] + 'px)'
query[name] = min + ' and ' + max
query[name + '-up'] = 'screen and ' + min
query[name + '-down'] = 'screen and ' + max
// Usage: @media query.mobile or @media query.tablet-up etc...
于 2017-12-09T15:19:39.087 回答