5

Problem

I'm trying to produce some unicode characters after compiling my *.scss file.

As an example, I have the following (SCSS):

.element:after {
    content: "\a0";
}

When the file is compiled, it outputs the following (CSS):

.element:after {
    content: "\\a0";
}

Notice the extra unwanted backslash (\).

Attempted Solution #1

I did try the solution here: Sass: unicode escape is not preserved in .css file, which suggests introducing the following function:

@function unicode($str) {
    @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
}

And using it like so (SCSS):

.element:after {
    content: unicode("a0");
}

However, this produces the following (CSS)

.element:after {
    content: "\\" ")+unquote(str-insert($str, " \\\\ ", 1))+unquote(" \\ ""; 
}

Notice, it's not even invoking the function as intended. Why is that?

Project Details

I'm using these libraries in Maven:

<dependency>
    <groupId>net.jawr</groupId>
    <artifactId>jawr-core</artifactId>
    <version>3.9</version>
</dependency>

<dependency>
    <groupId>net.jawr.extensions</groupId>
    <artifactId>jawr-spring-extension</artifactId>
    <version>3.9</version>
</dependency>

<dependency>
    <groupId>com.darrinholst</groupId>
    <artifactId>sass-java-gems</artifactId>
    <version>3.4.20.0</version>
</dependency>

<dependency>
    <groupId>org.jruby</groupId>
    <artifactId>jruby-core</artifactId>
    <version>9.1.5.0</version>
</dependency>

<dependency>
    <groupId>org.jruby</groupId>
    <artifactId>jruby-stdlib</artifactId>
    <version>9.1.5.0</version>
</dependency>

Temporary solution

Don't use unicodes in SCSS. Instead, use Font Awesome in the HTML (keeping Font Awesome in a CSS file).

Community
  • 1
  • 1
Håvard Geithus
  • 5,544
  • 7
  • 36
  • 51
  • 1
    In sassmeister your two codes work fine: [code1](http://www.sassmeister.com/gist/7caa7e4a4edb17df57ccdc68bcdd2b70) and [code2](http://www.sassmeister.com/gist/f39502187971629b76ce883f30aa627b) –  Nov 02 '16 at 10:33
  • Thanks, that's good to know. I'm running SASS version 3.4.20 (I think) locally on JRuby, and then serving that file via the JAWR servlet in a Spring application. So I guess there are multiple places where something could go wrong. I'll try having a look at the intermediary stages. See if I find anything. – Håvard Geithus Nov 02 '16 at 16:36
  • FWIW, I'm having this same issue using grunt-sass. Problem is with Bootstrap breadcrumbs, which has `content: "#{$breadcrumb-separator}\00a0"` and `$breadcrumb-separator: "/" !default;` the result of which is `content: "/\\00a0"` :( – steve May 04 '17 at 17:43

1 Answers1

3

I had the same issue while trying to use a custom icons font. The solution I found is creating a mixin which looks like this :

@mixin class-for-icon($name, $code) {
    .icon-#{$name}::before {
        content: unquote("\"\\#{$code}\"");
    }
}

And then I can use it like this :

@include class-for-icon('myIcon', 'e1ff');

/* generates */

.icon-myIcon::before {
    content: "\e1ff";
}

I use node-sass 4.5.3 to compile my sass files into css, and this is working well (currently using it in production on a few projects)

Hope this helps !

tonblaz
  • 31
  • 4