SCSS - How to avoid extra space when intrapolating variable in content propery

Question

I have a simple mixin like this:

@mixin icon_fn($glyph) {
  &::before {content: "\e#{$glyph}";}
}

so that I can use it as simply as @include @icon_fn("9fa") but for some reason there's always a space between \e and the variable. Can't figure out a way to get rid of it..

-- After using function from the other thread

@function str-remove-whitespace($str) {
    @while (str-index($str, ' ') != null) {
        $index: str-index($str, ' ');
        $str: "#{str-slice($str, 0, $index - 1)}#{str-slice($str, $index + 1)}";
    }
    @return $str;
}

@mixin icon_fn($glyph) {
  $theglyph: "\e#{$glyph}";

  &::before {content: str-remove-whitespace($theglyph);}
}

The white space still persists

Does this answer your question? [How to remove whitespace in SASS string?](https://stackoverflow.com/questions/46805243/how-to-remove-whitespace-in-sass-string) — Kunal Tanwar, Dec 13 '22 at 18:02
Unfortunately it didn't. I edited my post to show how I used it — Moseleyi, Dec 13 '22 at 20:07
I also tried `"\e" + str-remove-whitespace($glyph);` and it didn't work. Surprisngly if I add any char after `"\e"` like `"\e-" + $glyph` then the space disappears o_O — Moseleyi, Dec 13 '22 at 20:16

score 0 · Answer 1 · answered Dec 14 '22 at 07:20

I guess I solved your problem. I already quite the same question some time back and thanks to Amaury Hanser for the original answer.

Original Question and Solution - https://stackoverflow.com/a/69014465/15748278

See how I used it in your case scenario.

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

The above function searches and replaces the string with another. So in your case what can we do is first we can search for and replace it with empty ''.

@mixin icon($glyph) {
    &::before {
        content: #{str-replace('"\\e#{$glyph}"', ' ', '')};
    }
}

// and then you can use it like this

div {
    @include icon(958);
}

And the output is as you wanted.

SCSS - How to avoid extra space when intrapolating variable in content propery

1 Answers1