Stylus 中的 SASS 紧凑属性语法答案

【问题标题】：SASS compact property syntax in StylusStylus 中的 SASS 紧凑属性语法
【发布时间】：2015-10-24 01:18:06
【问题描述】：

是否可以做类似的事情

background:
  image: url(...)
  repeat: no-repeat
  size: cover

在 SASS 中哪些可以在 Stylus 中完成？

【问题讨论】：

标签： stylus

【解决方案1】：

很遗憾，这在手写笔中是不可能的。但是你可以使用这样的函数：

background($url, $repeat = false, $size = false, $position = false, $attachment = false)
    background-image url($url)
    if ($repeat)
        background-repeat $repeat
    if ($size)
        background-size $size
    if ($position)
        background-position $position
    if ($attachment)
        background-attachment $attachment

并像这样使用它：background("../images/ico-timeline.png", repeat-x, auto, center left, fixed) 或 background("../images/ico-timeline.png", repeat-x, auto)。

标记为false的变量是可选的，所以你不需要每次使用这个函数时都使用它。

【讨论】：

【解决方案2】：

不，这在 Stylus 中是不可能的。

【讨论】：