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

Question

我正在设计一个可重复使用的弹出式组件，在框附近有一个箭头。我想知道是否有办法使用 mixin 来制作展示位置样式 easier/neater?

.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 链，但它似乎会增加比所需更多的复杂性。

Answer 1

这样的怎么样？:

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

Answer 2

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

@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 (...) 可让您传递任意数量的属性。

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

CSS/SCSS - reusable mixin for custom attribute styles

javascript

css

sass

scss-mixins