CSS/SCSS - 自定义属性的可重用 mixin styles

Question

I'm styling a re-usable popout component with an arrow positioned near the box. I'm wondering if there is a way to use a mixin to make the placement styling 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;
        }
    }
}

I initially had a chain of @if being used however it seems like it would be adding more complexity than required.

Answer 1

How about something like this?:

@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

Depending on what else you want to do with this selector, I would either do like this:

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

Or like this (you can even add a @content if required):

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

And if you don't plan to reuse the mixin, you can use the -12px position value directly instead of passing it as a parameter:

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

The argument list (...) will let you pass as many properties as you want.