css - SCSS帮助器类@mixin，带有破折号问题

我正在构建一堆自己的帮助器类，对于大多数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})
        }
    }
}

最佳答案

我创建了一个函数，当其中包含破折号-时，将您的字符串分为两部分。

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

关于css - SCSS帮助器类@mixin，带有破折号问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58559216/