Sass variable interpolation with backslash in output

Question

I'm creating some icon font rules for using in my site. Using Sass I wanted to list all the icons in a list variable and use @each to loop through them all.

Code looks like this:

$icons: 
    wifi 600,
    wifi-hotspot 601,
    weather 602;

@each $icon in $icons {
    .icon-#{nth($icon, 1)}, 
    %icon-#{nth($icon, 1)} {
        content: "\#{nth($icon, 2)}";
    }
}

The problem is the backslash on the content: line. I need it for the character encoding, but it escapes the variable interpolation, outputting CSS that looks like this:

.icon-wifi {
  content: "\#{nth($icon, 2)}";
}

Adding one more backslash like this: content: "\\#{nth($icon, 2)}"; outputs this CSS:

.icon-wifi {
  content: "\\600";
}

Is there a way to get the Sass to output CSS with only a single backslash while keeping the variable interpolation?

In Sass 3.4.13, try this 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:18
I believe this is related to this issue: https://github.com/sass/libsass/issues/1115 — orrd, Jun 17 '15 at 04:05

score 13 · Answer 1 · answered Jul 27 '17 at 04:24

13

I got this to work by messing with the interpolation

sassmesiter demo

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$icons: 
    wifi 600,
    wifi-hotspot 601,
    weather 602;

@each $icon in $icons {
    .icon-#{nth($icon, 1)}, 
    %icon-#{nth($icon, 1)} {
        content: #{'"\\' + nth($icon, 2) + '"'}; // <------ See this line
    }
}

compiles to

.icon-wifi {
  content: "\600";
}

.icon-wifi-hotspot {
  content: "\601";
}

.icon-weather {
  content: "\602";
}

answered Jul 27 '17 at 04:24

aaaaaa

1,233
13
24

Best solution for me ! – Loenix Aug 02 '19 at 15:18
This worked for me well :) content: #{'"\\' + $unicode + '"'} – Noel Schenk May 01 '20 at 15:45

Daniel Tonon · Answer 2 · 2018-10-06T04:16:12.663

If you include the backslash in the actual variable, then when the sass generates the css, it will actually generate the calculated unicode character instead of outputting the unicode in the css output. This still usually works but it's hard to debug if something is going wrong and it is a bit more prone to cause issues in the browser in rendering the icon.

To output the actual unicode in the generated CSS, you can do this:

@function icon($character){
    @return unquote('\"') + unquote(str-insert($character,'\\', 1)) + unquote('\"');
}

$icon-thing: "e60f";

.icon-thing:before {
    content: icon($icon-thing); //outputs content: "\e60f";
}

There's an extra closing bracket in your function – cameronjonesweb Mar 19 '17 at 10:37 — cameronjonesweb, Mar 19 '17 at 10:37

score 3 · Accepted Answer · answered Feb 06 '14 at 16:56

3

You can add the backslash to the parameter in the $icons variable. That is,

$icons: wifi "\600", wifi-hotspot "\601", weather "\602";

@each $icon in $icons {
  .icon-#{nth($icon, 1)}, %icon-#{nth($icon, 1)} {
    content: "#{nth($icon, 2)}";
  }
}

Generated CSS:

.icon-wifi {
  content: "\600"; 
}

.icon-wifi-hotspot {
  content: "\601"; 
}

.icon-weather {
  content: "\602"; 
}

answered Feb 06 '14 at 16:56

Kashyap

4,696
24
26

Thanks! That worked. But I do wonder if there is a character sequence or function that would allow the backslash to be outside the $icons variable. – Ben Feb 06 '14 at 17:03
@Ben Do you actually *need* to have the backslash separate? – cimmanon Feb 06 '14 at 19:57
@cimmanon No, the answer provided a solution to my problem. I'm just wondering regarding the technical aspect. Is there a way to output a backslash immediately before and interpolated sass variable? – Ben Feb 06 '14 at 20:37
@Ben I did tinker with it a bit (including having the backslash be a variable), but I couldn't get the desired output. I suspect it might be a bug in Sass. – cimmanon Feb 06 '14 at 20:39
3

@Ben in **Sass 3.3** it's possible to overcome this problem with slicing the backslash from a string, and then combining it with any code like so `str-slice("\x",1,1) + $code`. See my answer here: **http://stackoverflow.com/questions/21641833/how-to-insert-a-unicode-character-in-sass-mixin/21644971#21644971** – Martin Turjak Feb 08 '14 at 10:43
@MartinTurjak Thanks man, that works (indirect as it may be). – Ben Feb 08 '14 at 13:08
1

Darn, doesn't look like this works anymore. I'm getting generated CSS with strange characters instead of backslashes. – Sean Adkinson Jan 27 '15 at 23:11
@SeanAdkinson Did you ever come up with a solution to the "strange characters" being added? – Jake Hills Nov 18 '15 at 17:42
@Jake I don't recall finding a fix, no. I think we just came up with an entirely different solution, but it was too long ago to remember for sure. – Sean Adkinson Nov 18 '15 at 21:38

score 1 · Answer 4 · answered Jan 14 '20 at 20:18

1

Use unquote and double slash

$var:123 → content:"\e123"

 content:#{unquote('\"')+("\\")+("e")+$var+unquote('\"')};

answered Jan 14 '20 at 20:18

Kareem

5,068
44
38

Daniel Tonon · Answer 5 · 2018-10-06T04:19:15.003

If you are using Gulp to compile your Sass files, installing this Gulp plugin is probably the easiest way to get around the issue:

https://www.npmjs.com/package/gulp-sass-unicode

var sass = require('gulp-sass');
var sassUnicode = require('gulp-sass-unicode');

gulp.task('sass', function(){
  gulp.src('style.scss')
    .pipe(sass())
    .pipe(sassUnicode()) // <-- This is the bit that does the magic
    .pipe(gulp.dest( "css/" ));
});

There is no need to make any code alterations in your Sass files. Write out your Sass code how you want and the unicode characters are decoded back into regular escaped strings in the output CSS automatically.

Input SCSS

$testContent: "\f26e";

#test {
  content:  $testContent;
}

Output CSS

#test {
  content: "\f26e";
}

score 0 · Answer 6 · answered Feb 07 '19 at 19:51

Unfortunately, these solutions were 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";
//}

Sass variable interpolation with backslash in output

6 Answers6

Linked