Stylus CSS 媒体查询中的变量答案

【问题标题】：Variables in Stylus CSS Media QueriesStylus CSS 媒体查询中的变量
【发布时间】：2012-10-15 04:08:30
【问题描述】：

我已经尝试了所有方法，但无法让 Stylus CSS 预处理器在媒体查询中使用变量。

例如这不起作用：

t = 1000px

@media screen and (max-width: t)
    html
        background blue

有人知道怎么做吗？

【问题讨论】：

这可能有用也可能没用，但Sass can do it 很容易。
我知道，而且我确信 LESS 也可以，但我真的更喜欢 Stylus 的语法，这是我无法跨越的唯一障碍。 :(

标签： css stylus

【解决方案1】：

看起来手写笔支持更简洁的方式来做与pull request相同的事情。

在这里，给定一个块大小，我可以制作使容器在页面中居中的样式，并根据浏览器大小将容器大小设置为 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

【讨论】：

【解决方案2】：

很遗憾，但您不能在媒体查询中使用变量或插值。我昨天偶然发现了类似的任务并提出了这个解决方案：

t = 1000px

unquote("@media screen and (max-width: " + t + ") {")
html
    background blue
unquote("}")

这并不漂亮，但它确实有效 - 实际上，您可以使用 unquote 解决大多数此类触控笔问题。

【讨论】：

【解决方案3】：

使用 0.43.0 版的 Stylus，支持媒体查询，就像您在示例中使用的那样，也可以不带冒号，如下所示：

t = 1000px

@media screen and (max-width t)
    html
        background blue

via Github

【讨论】：

【解决方案4】：

这对我有用。

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

【讨论】：

【解决方案5】：

现在支持开箱即用，snippet from official page：

foo = 'width'
bar = 30em
@media (max-{foo}: bar)
body
    color #fff

【讨论】：

【解决方案6】：

我写了一个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;
  }
}

【讨论】：

【解决方案7】：

现在应该可以工作了：

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;


 }
}

【讨论】：

这还不是全部。例如，我不能这样做：small-min = '(min-width: ' + lower-bound(small-range) + ')' large-max = '(max-width: ' + upper-bound(large-range) + ')' @media screen {small-min} and {large-max}

【解决方案8】：

如果我可以提供一种简洁易读的方式，我会像这样使用哈希来发挥我的优势：

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

超级明显，易于阅读。保持美观和简单。

【讨论】：

【解决方案9】：

我喜欢创建一个media mixin，这样就无需为媒体查询创建命名变量：

media(query)
  @media query
    {block}

使用过程如下：

+media("screen and (min-width:" + width + "), print")
  .class
    foo: bar

【讨论】：

【解决方案10】：

我喜欢 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...

【讨论】：