Javascript CSS/SCSS-自定义属性样式的可重用混合

我正在设计一个可重复使用的弹出式组件，该组件在框附近有一个箭头。我想知道是否有一种方法可以使用mixin使布局样式更容易/更整洁

.dialog {
    ...

    &[data-arrow-placement^='top'] {
        [data-arrow] {
            bottom: -12px;
        }
    }

    &[data-arrow-placement^='bottom'] {
        [data-arrow] {
            top: -12px;
        }
    }

    &[data-arrow-placement^='left'] {
        [data-arrow] {
            right: -12px;
        }
    }

    &[data-arrow-placement^='bottom-right'] {
        [data-arrow] {
            left: -12px;
            top: -12px;
        }
    }
}

---

我最初使用的是一个@if链，但它似乎会增加比所需更大的复杂性。

像这样的东西怎么样

@mixin arrow($placement,$position,$other:'') {
    &[data-arrow-placement^='#{$placement}'] {
        [data-arrow] {
            #{$position}: -12px;
            @if $other != '' {
              #{$other}: -12px;
            }
        }
    }
}

.dialog {
  @include arrow('top','bottom');
  @include arrow('bottom','top');
  @include arrow('left','right');
  @include arrow('bottom-right','left','top');
}

---

像这样的怎么样

@mixin arrow($placement,$position,$other:'') {
    &[data-arrow-placement^='#{$placement}'] {
        [data-arrow] {
            #{$position}: -12px;
            @if $other != '' {
              #{$other}: -12px;
            }
        }
    }
}

.dialog {
  @include arrow('top','bottom');
  @include arrow('bottom','top');
  @include arrow('left','right');
  @include arrow('bottom-right','left','top');
}

---

根据您希望使用此选择器执行的其他操作，我将执行以下操作：

@mixin arrowPlacement($placement) {
    &[data-arrow-placement^="#{$placement}"] {
        [data-arrow] {
            @content;
        }
    }
}

.dialog {
    $arrowPosition: -12px;
    
    @include arrowPlacement(top) {
        bottom: $arrowPosition;
    };
    
    @include arrowPlacement(bottom) {
        top: $arrowPosition;
    };
    
    @include arrowPlacement(left) {
        right: $arrowPosition;
    };
    
    @include arrowPlacement(bottom-right) {
        left: $arrowPosition;
        top: $arrowPosition;
    };
}

或者像这样（如果需要，您甚至可以添加）：

如果不打算重用mixin，可以直接使用

-12px

位置值，而不是将其作为参数传递：

@mixin arrowPlacement2($placement, $properties...) {
    &[data-arrow-placement^="#{$placement}"] {
        [data-arrow] {
            @each $property in $properties {
              #{$property}: -12px;
            }
        }
    }
}

.dialog {
    @include arrowPlacement2(top, bottom);
    @include arrowPlacement2(bottom, top);
    @include arrowPlacement2(left, right);
    @include arrowPlacement2(bottom-right, left, top);
}

---

将允许您传递任意数量的属性。

根据您希望使用此选择器执行的其他操作，我将执行以下操作：

@mixin arrowPlacement($placement) {
    &[data-arrow-placement^="#{$placement}"] {
        [data-arrow] {
            @content;
        }
    }
}

.dialog {
    $arrowPosition: -12px;
    
    @include arrowPlacement(top) {
        bottom: $arrowPosition;
    };
    
    @include arrowPlacement(bottom) {
        top: $arrowPosition;
    };
    
    @include arrowPlacement(left) {
        right: $arrowPosition;
    };
    
    @include arrowPlacement(bottom-right) {
        left: $arrowPosition;
        top: $arrowPosition;
    };
}

或者像这样（如果需要，您甚至可以添加）：

如果不打算重用mixin，可以直接使用

-12px

位置值，而不是将其作为参数传递：

@mixin arrowPlacement2($placement, $properties...) {
    &[data-arrow-placement^="#{$placement}"] {
        [data-arrow] {
            @each $property in $properties {
              #{$property}: -12px;
            }
        }
    }
}

.dialog {
    @include arrowPlacement2(top, bottom);
    @include arrowPlacement2(bottom, top);
    @include arrowPlacement2(left, right);
    @include arrowPlacement2(bottom-right, left, top);
}

---

将允许您传递任意数量的属性。

我使用了选项1中的一些内容。它干净简单，谢谢！我按照选项1的思路做了一些事情。它干净简单，谢谢！