如何将类似的代码转换为罗盘sass函数中的函数？

Question

我想在我的scss文件中添加一些常见的变量，例如mgb10 for margin-bottom：10px; pdl20 for padding-left：20px;
我的方法非常愚蠢。如何使用sass函数改进我的代码。

Answer 1

书店对OP的问题给出了很好的答案，但我不相信问题是正确的。这是您使用示例代码绘制的方案中@extend的问题以及为什么它可能不是正确的选择。

让我们从这些小家伙开始，他们看起来像我们可能经常使用的那些：

%mgt10 { margin-top: 10px }
%mgb10 { margin-bottom: 10px }
%mgl10 { margin-left: 10px }
%mgr10 { margin-right: 10px }

我们开始编码并最终使用它们：

.body { @extend %mgt10; @extend %mgb10; @extend %mgr10; @extend %mgl10; font: 12px/1.4 sans-serif }

.error { @extend %mgt10; color: red; padding: 10px; }

.cool-button { @extend %mgt10; border: 1px solid }

hr.awesome { @extend %mgt10; color: blue }

这是我们的短Sass文件将生成的（316字节）：

.body, .error, .cool-button, hr.awesome {
  margin-top: 10px; }

.body {
  margin-bottom: 10px; }

.body {
  margin-left: 10px; }

.body {
  margin-right: 10px; }

.body {
  font: 12px/1.4 sans-serif; }

.error {
  color: red;
  padding: 10px; }

.cool-button {
  border: 1px solid; }

hr.awesome {
  color: blue; }

你不会以这种方式写你的CSS，不是吗？在这种情况下，@extend正在对你起作用，因为它产生的选择器远远多于你实际需要的选择器（并且只会越多，你扩展任何给定类的选择器越多，所扩展的类中的行数越少 - 设想30个选择器延伸%mgt10，大约50？）。你已经把DRY带到了极端，因此，你已经放弃了Sass方面的可读性和CSS方面的简洁性。

让我们尝试另一条路线：

$default-gutter-size: 5px;

@function gutter($width, $size: $default-gutter-size) {
    @return $width * $size;
}

.body { margin: gutter(2); font: 12px/1.4 sans-serif }

.error { margin-top: gutter(2); color: red; padding: gutter(2); }

.cool-button { margin-top: gutter(2); border: 1px solid }

hr.awesome { margin-top: gutter(2); color: blue }

我们基本上使用相同的CSS，但是没有所有额外的选择器，我们仍然可以使用速记（作为一个额外的奖励，如果我们真的想要，我们可以使用我们的功能，而不是边缘的东西）（ 228字节）：

.body {
  margin: 10px;
  font: 12px/1.4 sans-serif; }

.error {
  margin-top: 10px;
  color: red;
  padding: 10px; }

.cool-button {
  margin-top: 10px;
  border: 1px solid; }

hr.awesome {
  margin-top: 10px;
  color: blue; }

不要误解我的意思，@extend很棒，但它最好用于扩展具有相当数量属性的类，而不仅仅是1或2.使用CSS预处理器的一部分是知道何时使用哪个功能可以获得最佳效果。

Answer 2

这是一个Sass mixin（您可以将其更改为Scss），它使用@for指令生成所有占位符选择器：

=shorthander($property: margin, $shorthand: mg)
  @for $i from 0 through 4
    $multiple: $i*5
    %#{$shorthand}#{$multiple}
      #{$property}: $multiple*1px

+shorthander()
+shorthander(margin-top, mgt)
+shorthander(margin-right, mgr)
+shorthander(margin-bottom, mgb)
+shorthander(margin-left, mgl)

div
  @extend %mgt20

Demo