Вспомогательные классы SCSS @mixin с проблемой тире

Question

Я создаю кучу своих собственных вспомогательных классов, и для большинства свойств / значений CSS это одно слово, поэтому мой код SCSS ниже работает нормально, но для чего-то вроде justify-content: flex-start Я столкнулся со стеной.

Я использовал str-slice, чтобы взять первую букву из свойства и значения, но теперь мне нужно расширить его, если значение свойства использует тире.

Есть мысли?

$positions: ('relative', 'absolute', 'fixed', 'sticky');
$flexPositions: ('flex-start', 'center', 'flex-end');
@mixin positionHelpers($breakpoint) {
    @each $position in $positions {
        .p\:#{str-slice($position, 0, 1)}\@#{$breakpoint} {
            position: #{$position} !important;
        }
    }
    @each $position in $flexPositions {
        .jc\:#{str-slice($position, 0, 1)}\@#{$breakpoint} {
            justify-content: #{$position} !important;
        }
    }
}

Добавлено следующее для большего контекста:

$defaultBreakpoints: (
    'xs': 'screen and (max-width: 767px)',
    'sm': 'screen and (min-width:768px)',
    'md': 'screen and (min-width:1024px)',
    'lg': 'screen and (min-width:1201px)'
);
@each $breakpoint, $query in $defaultBreakpoints {
    @if $breakpoint == 'xs' {
      @include positionHelpers(#{$breakpoint})
    } @else {
        @media #{$query} {
            @include positionHelpers(#{$breakpoint})
        }
    }
}

Answer 1

Я создал функцию для разделения вашей строки на 2 части, когда в ней есть тире -.

 @function split($string, $separator:"-") {
   $index : str-index($string,  $separator);
   $newString:"";

   @if($index!= null){
      $str-1 : #{str-slice(str-slice($string, 1, $index - 1), 0, 1)};
      $str-2 : #{str-slice(str-slice($string, $index + 1), 0, 1)};
      $newString: $str-1 + $str-2
   } @else{
     $newString: str-slice($string,  0, 1);
   }

   @return $newString;
}

Затем вы можете вызвать ее в вашем @each $position in $flexPositions {...}:

$positions: ('relative', 'absolute', 'fixed', 'sticky');
$flexPositions: ('flex-start', 'center', 'flex-end');
@mixin positionHelpers($breakpoint) {
    @each $position in $positions {
        .p\:#{str-slice($position, 0, 1)}\@#{$breakpoint} {
            position: #{$position} !important;
        }
    }
    @each $position in $flexPositions {
        $string: split($position); /*here you create a new string*/
        .jc\:#{$string}\@#{$breakpoint} {
            justify-content: #{$position} !important;
        }
    }
}