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

在手写笔中，您有interpolation和iteration。所以在加入它们之后它应该可以工作（我不知道Stylus，所以你需要做一些小修复）：

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中的<head>就像这样：

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

用手写笔编写类定义

2 个答案: