SCSS helper classes #mixin with dashes issue - css

Question

I'm building a bunch of my own helper classes and for most CSS properties/values they are one word so my SCSS code below works fine but for something like justify-content: flex-start I've hit the wall.
I was using str-slice to take the first letter from the property and value but now I need to extend that if the property value uses a dash.
Any thoughts?
$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;
}
}
}
Added the following for more context:
$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

I created a function to split your string in 2 parts when there is a dash - in it.
#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;
}
Then you can call it in your #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;
}
}
}