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

Question 1

Я создаю кучу собственных вспомогательных классов, и для большинства свойств/значений 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})
        }
    }
}

css sass

0

John the Painter 25 Окт 2019 в 16:12

Какой результат вы хотите? Что такое $breakpoint?

–

ReSedano

25 Окт 2019 в 17:35

js:fs@xs например, или js:fe@xs — $breakpoints — это ассоциативный массив, например, 'xs':'screen and (max-width: 767px)' — я обновлю свой вопрос

–

John the Painter

25 Окт 2019 в 17:37

Answer

Я создал функцию для разделения вашей строки на 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;
        }
    }
}

0

ReSedano 26 Окт 2019 в 12:38

Question 2

Я создал функцию для разделения вашей строки на 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;
        }
    }
}

0

ReSedano 26 Окт 2019 в 12:38

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

1 ответ

Похожие вопросы

Новые вопросы

css