CSS/SCSS - 自定义属性样式的可重用 mixin答案

【问题标题】：CSS/SCSS - reusable mixin for custom attribute stylesCSS/SCSS - 自定义属性样式的可重用 mixin
【发布时间】：2021-08-10 04:24:42
【问题描述】：

我正在设计一个可重复使用的弹出组件，并在框附近放置一个箭头。我想知道是否有一种方法可以使用 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 链，但它似乎会增加比所需更多的复杂性。

【问题讨论】：

标签： javascript css sass scss-mixins

【解决方案1】：

根据您还想用这个选择器做什么，我会这样做：

@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;
    };
}

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

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

.dialog {
    $arrowPosition: -12px;

    @include arrowPlacement(top, $arrowPosition, bottom);
    @include arrowPlacement(bottom, $arrowPosition, top);
    @include arrowPlacement(left, $arrowPosition, right);
    @include arrowPlacement(bottom-right, $arrowPosition, left, top);
}

而且如果你不打算重用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);
}

argument list (...) 可以让您传递任意数量的属性。

【讨论】：

我选择了与选项 1 类似的东西。它干净简单，谢谢！

【解决方案2】：

这样的事情怎么样？：

@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');
}

【讨论】：