Question

sass上的一个简单代码段，它使用嵌套来扩展css属性font-size和font-weight。

p
  color: red
  font:
    size: 12px
    weight: bold

汇编成，

p {
  color: red;
  font-size: 12px;
  font-weight: bold;
}

手写笔代码，

p
  color red
  font
    size 12px
    weight bold

编译成，

p {
  color: #f00;
}
p font {
  size: 12px;
  weight: bold;
}

如何重复属性名称，如何使手写笔能够像sass一样编译属性？

感谢。

Answer 1

Stylus中没有这样的原生功能（参见https://github.com/stylus/stylus/issues/848），但您可以使用像这样的自定义mixin以某种方式模拟它：

font(options = {})
  if typeof(options) == 'object'
    default = {
      family: 'Helvetica, Arial, sans-serif'
      size: 1em
      height: 1.25
      weight: unquote('')
    }
    options = merge(default, options)

    font: s(
      '%s %s/%s %s',
      options.weight,
      options.size,
      options.height,
      unquote(join(', ', options.family)))
  else
    font: arguments

.foo
  font({
    family: Arial sans-serif
    size: 10px
    weight: bold
  })

我们在这里创建一个透明的font mixin，它接受一个options对象，该对象在定义时将与预定义的默认字体值合并，然后呈现为单个{{1}声明。

Answer 2

官方文件中没有这样的内容。但根据这个Link，Sass具有嵌套属性的很酷的特性，但是Stylus没有提供这样的东西。相反，我建议您可以使用自定义mixin来处理这种情况。

Answer 3

UpdateL可以工作:)我不确定标签的语法是什么样，但是，嘿，这行得通，看起来还可以（肯定比mixins更好）

我还没有测试过，但是我猜你可以像这样使用&运算符

.p, .font
    color #f00
    &.font
        size 12px
        weight bold

p.s。 StackOverflow需要添加手写笔语法支持

与sass一样，扩展属性的手写笔是什么？

3 个答案: