css - 用手写笔写类定义

Question

我想输出这样的东西:

.margin-right-small {
  margin-right: 10px;
}

.margin-right-medium {
  margin-right: 15px;
}

.margin-right-large {
  margin-right: 20px;
}
/* same for top, bottom, and left */

我有没有可能做点什么让这比这更容易:

small = 10px
medium = 15px
large = 20px

.margin-right-small {
  margin-right: small;
}

.margin-right-medium {
  margin-right: medium;
}

.margin-right-large {
  margin-right: large;
}
/* same for top, bottom, and left */

像这样的伪代码:

small = 10px
medium = 15px
large = 20px
sides = ['top', 'right', 'bottom', 'left']
sides.each(function(side) {
  .margin-[side]-small {
    margin-[side]: small;
  }

  .margin-[side]-medium {
    margin-[side]: medium;
  }

  .margin-[side]-large {
    margin-[side]: large;
  }
}
/* that would take care of all sides */

我是手写笔的新手。简化这可能吗？如果不是，我很难看出手写笔在这个特定示例中比常规 css 好多少......

Answer 1

在 Stylus 中你有 interpolation和 iteration .所以在将它们连接在一起之后它应该可以工作(我不知道 Stylus，所以你可能需要做一些小的修复):

for side in sides
  .margin-{side}-small
    margin-{side} small