Блог

Я написал @each цикл для создания text-decoration стиля, но столкнулся с проблемой. Вы можете посмотреть ниже.

 $args: underline, overline, underline dashed, underline double, underline dotted, underline wavy,
    underline overline;

@each $arg in $args {
    .text-decoration-#{$arg} {
        text-decoration: $arg;
    }
}
 

ВЫВОД, КОТОРЫЙ Я ПОЛУЧАЮ

 .text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-overline {
  text-decoration: overline;
}

.text-decoration-underline dashed {
  -webkit-text-decoration: underline dashed;
          text-decoration: underline dashed;
}

.text-decoration-underline double {
  -webkit-text-decoration: underline double;
          text-decoration: underline double;
}

.text-decoration-underline dotted {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

.text-decoration-underline wavy {
  -webkit-text-decoration: underline wavy;
          text-decoration: underline wavy;
}

.text-decoration-underline overline {
  text-decoration: underline overline;
}
 

ВЫВОД, КОТОРЫЙ Я ХОЧУ

Вместо этого я хочу заменить пробел дефисами - . Если я добавлю дефисы в аргумент, это приведет к конфликту text-decoration значений;

 .text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-overline {
  text-decoration: overline;
}

.text-decoration-underline-dashed {
  -webkit-text-decoration: underline dashed;
          text-decoration: underline dashed;
}

.text-decoration-underline-double {
  -webkit-text-decoration: underline double;
          text-decoration: underline double;
}

.text-decoration-underline-dotted {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

.text-decoration-underline-wavy {
  -webkit-text-decoration: underline wavy;
          text-decoration: underline wavy;
}

.text-decoration-underline-overline {
  text-decoration: underline overline;
}
 

Вы можете создать функцию для замены подстроки другой строкой. Вы можете найти такую функцию на этом CSS-трюках: str-замените статью, написанную Китти Жиро.

Функция заключается в:

 @function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  
  @if $index {
    @return str-slice($string, 1, $index - 1)   $replace   str-replace(str-slice($string, $index   str-length($search)), $search, $replace);
  }
  
  @return $string;
}
 

В своем коде вы бы сделали:

 @function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  
  @if $index {
    @return str-slice($string, 1, $index - 1)   $replace   str-replace(str-slice($string, $index   str-length($search)), $search, $replace);
  }
  
  @return $string;
}

$args: underline, overline, underline dashed, underline double, underline dotted, underline wavy,
    underline overline;

@each $arg in $args {
    .text-decoration-#{str-replace(#{$arg}, ' ', '-')} {
        text-decoration: str-replace(#{$arg}, ' ', '-');
    }
}