3

I want to generate this CSS with a Unicode character code:

.foo::before {
  content: '\4556';
}

Concatenating a single (unescaped) backslash (\) with the code (e.g. 4556).

With the main condition that I don't want to have to provide the Unicode codes already prepended with the backslash (e.g. \4556) but to generate them from an integer for example. Like in the following mixin:

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

@include make-icon('foo','4556');

However the above mixin returns this CSS:

.foo::before {
  content: '\#{$code}'; }

I've tried '\\#{$code}', '\##{$code}', '/\#{$code}', '\/#{$code}', '\$code', '\\##{$code}' and none of them gives the desired result.

Even tried defining slash as a variable and interpolate it but that didn't help either.

Any idea how to solve this?

Martin Turjak
  • 20,896
  • 5
  • 56
  • 76
AlexStack
  • 16,766
  • 21
  • 72
  • 104
  • possible duplicate of [Sass variable interpolation with backslash in output](http://stackoverflow.com/questions/21608762/sass-variable-interpolation-with-backslash-in-output) – cimmanon Feb 08 '14 at 04:48
  • it's not a duplication of that one because my codes don't have `\` in the beginning. But that would be one solution. However, I'm curious to learn how to solve this issue. – AlexStack Feb 08 '14 at 04:51
  • Yes, it is a duplicate. The fact that you're using a string and the other question is using a number doesn't change anything. The problem is the same and the solution is the same. – cimmanon Feb 08 '14 at 13:06
  • Sir, my question is different. It is the leading slash character that causes the problem. The solution to that question requires me to put the slash in my code. I don't want that. Martin Turjak's answer is the correct answer which doesn't require me to add the slash at the beginning of my codes. – AlexStack Feb 08 '14 at 13:09
  • In Sass 3.4.13, try solution on there: http://stackoverflow.com/questions/26111982/sass-3-4-removing-forward-slash-on-a-string/26112274#26112274 – user2450840 May 05 '15 at 05:30

2 Answers2

5

In Sass v3.3 you can get around this problem by using the new str-slice() function and doing something like this:

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

@include make-icon('foo', 4556);

which should output:

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

DEMO

Martin Turjak
  • 20,896
  • 5
  • 56
  • 76
  • Why didn't you just flag to close this question as a duplicate and provide an answer to the original non-duplicate question? – cimmanon Feb 08 '14 at 13:04
  • @cimmanon I have thought about it a bit ... and I have come to a conclusion that the answer to the other question offers a sufficient solution to the specific problem there ... although it is true that the discussion shows that both posters wondered if there was a way of using a single backslash in string interpolation. Anyway, I rewrote the question here a tiny bit ... so that it is more specifically asking just about that ... which, I think, makes it more likely for other people to find and less of a duplicate (but I it might still be borderline ;-) – Martin Turjak Feb 08 '14 at 17:08
  • 1
    This example works for old versions of sass, but with the latest version as of right now (v3.4.13) doesn't support this working. Here is a question which addresses the issue for later versions: http://stackoverflow.com/a/26112274/1203288 – bsara Apr 13 '15 at 22:39
0

Unfortunately, @MartinTurjak solution is not entirely working for me, but I was finally able to get it working with SASS maps

//node-sass 4.11.0
//libsass 3.5.4

$hexes: (
           checkmark: \2714
        );

@function out-content($var) {
    @return unquote("\"#{ $var }\""); 
}

@each $mod, $code in $hexes {    
    .#{$mod}-after {
        &:after {
            content: out-content($code);
        }
    }
}

//output
//.checkmark-after:after {
    //content: "\2714";
//}
Fraze
  • 908
  • 2
  • 8
  • 20