Sass 3.4 Removing forward slash on a string

Question

is theres a workaround or any other ways to make this work on Sass 3.4 +

@mixin icon ($name, $code) {
.#{$name}::before {
content: str-slice("\x",1,1) + $code;}
}

@include icon('test', 4556);

Code should output

.test::before { content: "\4556"; }

But on 3.4+ the \ slash is getting removed and outputted as

.test::before { content: "x4556"; }

Thanks

Answer 1

You stumbled across a currently-debated issue with escape characters in Sass. It seems that, currently, Sass will either add too many characters, or winds up putting the unicode character into the output css.

UPDATE:

@mixin icon ($name, $code) {
  $withslash: "\"\\#{$code}\"";
  .#{$name}:before {
    content: unquote($withslash);
  }
}
@include icon('test', '4556');

outputs

.test:before {
  content: "\4556";
}

http://sassmeister.com/gist/04f5be11c5a6b26b8ff9

Obviously the drawback to this approach is that it relies on doing weird things with an escape character and tricking Sass into unquoting a possibly malformed string.

Answer 2

Alternatively, you can use a helper function to delete whitespace from a string:

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

Then the function would look like this:

@mixin icon ($name, $code) {
  .#{$name}:before {
    content: nospaces("\ #{$code}");
  }
}

@include icon('test', '4556');

Or without quotes:

@mixin icon ($name, $code) {
  .#{$name}:before {
    content: nospaces(\ #{$code});
  }
}

@include icon('test', '4556');