使用手写笔编写类定义答案

【问题标题】：Write class definitions with stylus使用手写笔编写类定义
【发布时间】：2014-01-12 20:21:29
【问题描述】：

我想输出如下内容：

.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 更好......

【问题讨论】：

也许kizu.ru/en/issues/new-stylus-features/#block-mixins 会有所帮助

标签： css stylus

【解决方案1】：

在 Stylus 中，您有 interpolation 和 iteration。所以在将它们连接在一起之后它应该可以工作（我不知道 Stylus，所以你可能需要做一些小修复）：

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

【讨论】：

【解决方案2】：

在 CSS 中创建这样的东西是不可能的，但你可以使用 PHP，并使用 html 代码创建一个 php 文件，你可以。如示例：

<?php $small = '15px'; ?>
<style>
.class {
   margin-right: <?php echo $small; ?>;
}
</style>

请记住，您需要在 php 文件中创建它，并在 <head> 中创建 include，如下所示：

<?php include '\style.php'; // you are including the file style.php ?>

【讨论】：

他问的是 Stylus，而不是 CSS。在 Stylus 中它是可行的。
哦，我不知道。