让两个 Sass mixin 相互了解：一个 mixin 的输出应该不同，具体取决于另一个 mixin 的应用方式

Question

我正在构建一个可重用、可定制的组件。该组件有多个配置选项，每个选项都有多个值可供选择。

例如考虑这两个选项：

• content-position：left，right，top，bottom，center，
• content-padding：small，medium，large。

棘手的部分是填充必须根据位置而不同。例如。当内容位置为left时，左边的内边距必须放大，右边的内边距必须缩小。

用 HTML 类来实现非常简单：

<MyComponent class="--content-position-left --content-padding-small"/>

.MyComponent__Content {
  .MyComponent.--content-padding-small & {
    padding: 50px;
  }
  .MyComponent.--content-padding-small.--content-position-left & {
    padding-left: 75px;
    padding-right: 25px
  }

  .MyComponent.--content-padding-medium & {
    padding: 100px;
  }
  .MyComponent.--content-padding-medium.--content-position-left & {
    padding-left: 150px;
    padding-right: 50px;
  }
}

当您可以通过 HTML 应用配置时，这非常有效。

但我想提供一种使用纯 Sass 配置此组件的方法，而无需应用 HTML 类。

应该可以这样做：

.Page__Products {
  .MyComponent {
    @include my-component--content-position("left");
    @include my-component--content-padding("small");
  }
}

如何让my-component--content-padding 知道哪个填充边应该更大（如果有的话）？

我看到了两个明显的解决方案：

1. 将两个 mixin 合并为一个，并使其接受两个参数，例如：

   @include my-component--content-position-and-padding("small", "left");
   

   我不喜欢这种方法。当有多个选项相互依赖时，它会变得非常混乱。 您最终会得到一个“上帝”mixin 来控制一切，而不是多个单一用途的 mixin。

2. 保持 mixin 分开，但让每个 mixin 接受它需要的所有信息：

   @include my-component--content-position("left");
   @include my-component--content-padding("small", "left");
   

   这样更好，但我不喜欢冗余：你必须指定"left" 两次。

所以我想知道我是否可以执行以下操作，并且 padding mixin 会知道如何根据另一个 mixin 应用的位置来准确扭曲填充：

.Page__Products {
  .MyComponent {
    @include my-component--content-position("left");
    @include my-component--content-padding("small");
  }
}

这对于真正的编程语言来说是微不足道的，但 Sass 似乎还不够？

PS 我不希望 mixins 依赖于它们在全局变量中的应用顺序。

Answer 1

常量：

$none: none;
$left: left;
$right: right;
$mediumPadding: 100px;
$mediumPaddingLeft: 100px 50px 100px 150px;
$mediumPaddingRight: 100px 150px 100px 50px;
$smallPadding: 50px;
$smallPaddingLeft: 50px 25px 50px 75px;
$smallPaddingRight: 50px 75px 50px 25px;

混合：

@mixin align-padding($align, $padding)
{
    float: $align;
    padding: $padding;
}

SCSS：

.what-you-want-to-hang-it-on
{
    @include align-padding($none, $mediumpadding);
}