用手写笔编写类定义

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

在手写笔中，您有插值和迭代。所以在将它们加入它们之后，应该有效（我不懂手写笔，所以众所周知，你需要做一些小修复）：

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

.

Answer 2

在css中创建类似的东西，它是不可能的，但是您可以使用PHP，并使用HTML代码创建PHP文件。 如在示例中：

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

.

记住，您需要在PHP文件中创建此功能，并且如下所示的include中的生成acodeagcode：

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

.