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

Question

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

Answer 1

bookcasey 对 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

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

=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

演示