How to join spaced words with '-' in SASS [using @each loop]

Question

I wrote @each loop to generate text-decoration styling but I ran into a problem. You can see below.

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

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

OUTPUT I AM GETTING

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

OUTPUT I WANT

I want to replace space with hyphens - instead. If I add hyphens in argument it will conflict text-decoration value;

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

Amaury Hanser · Accepted Answer · 2021-09-02T12:30:50.813

You could create a function to replace a substring with another string. You can find such a function on this CSS-tricks: str-replace article written by Kitty Giraudel.

The function is:

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

In your code, you would do:

@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}, ' ', '-');
    }
}

you can do such things in sass I didn't know that! Thanks bro — Kunal Tanwar, Sep 02 '21 at 11:43
one thing more instead of `.text-decoration-#{$arg} { text-decoration: str-replace(#{$arg}, ' ', '-'); }` I wanted it in `classname` `.text-decoration-#{str-replace(#{$arg}, ' ', '-')} { text-decoration: $arg; }` — Kunal Tanwar, Sep 02 '21 at 11:51

How to join spaced words with '-' in SASS [using @each loop]

1 Answers1

Linked