How to Escape String CSS in SASS/Scss

How can I escape string css in sass/scss?

You can make use of the unquote function:

$from-smartphone-portrait: unquote("only screen and (min-width: 1px)");

To use the variable for the media query definition:

@media #{$from-smartphone-portrait} {

Escaping { and % in SASS

It's not pretty by any means but I got it to work. You'll have empty comments on the sides of it.

$inc: '*/{% include "hubspot/styles/responsive/required_base.css" %}/*';
/*#{$inc}*/

Outputs:

/**/{% include "hubspot/styles/responsive/required_base.css" %}/**/

Here is a demo: http://sassmeister.com/gist/19651edf94cf1158037f

Here it is in mixin form if you'll be doing it a lot:

@mixin raw ($string) {
  $string: '*/#{$string}/*';
  /*#{$string}*/
}

@include raw('{% include "hubspot/styles/responsive/required_base.css" %}');

and a small demo for this as well: http://sassmeister.com/gist/50caee499ff4fe8f63c7

If you're using some kind of build tool it would probably be better adding it to the CSS itself. Something like https://github.com/godaddy/gulp-header

Using SASS, How can I escape the slash character in a font declaration?

font: #{$fontSize}/#{$lineHeight} $fontName should do it.

Escaping # in SASS

In the end I decided to rewrite:

@include gradient(ff00ff, 00ff00, 600);

@include gradient("#ff00ff", "#00ff00", "600");

which works as expected.

Wondering what the SCSS equivalent of LESS's escape is?

I figured this out.

This got me pointed in the right direction:
How do I load extensions to the Sass::Script::Functions module?

And this got me the rest of the way there:
http://sass-lang.com/documentation/Sass/Script/Functions.html#adding_custom_functions

And here's my code if this is useful to anyone else :)
config.rb (require lib):

require File.dirname(__FILE__) + "/lib/urlencode.rb"

lib/urlencode.rb:

module Sass::Script::Functions
  def urlencode(string)
    Sass::Script::String.new(ERB::Util.url_encode(string));
  end
  declare :urlencode, :args => [:string]
end

Then it was just a matter of implementing in my stylesheet:

@mixin verticalGradient($startColor, $endColor, $height){
  background: $endColor url('#{$img_path}gradient/v/5px/' + $height + '/' + urlencode($startColor) + '/' + urlencode($endColor) + '.png') 0 0 repeat-x;
}

SASS element \ written in CSS

Just to add to @Mark answer and provide some context, try this code in your compiler:

$a: \e801;
$b: '\e801';
@debug $a;
@debug '#{$a}';
@debug $b;
@debug '#{$b}';

The output logged will be:

/style.scss:3 DEBUG: \e801 // <- Terminal has displayed the escaped `\\` as `\` (as appropriate for a program)
/style.scss:4 DEBUG: \e801 // <- Same as above
/style.scss:5 DEBUG: (A unicode character that I could not copy in)
/style.scss:6 DEBUG: (A unicode character that I could not copy in)

The reason is that SASS - or any programming language (apart from Apple's swift if I recall correctly - they can use unicode everywhere) - does not support these unicode characters anywhere else but inside strings (and even then it only supports representations and not the actual characters). So when you declare your unicode string without making it a string, it is assumed to just be chracters on their own, like the word sheep is just [s,h,e,e,p] and \e801 is just [\,e,8,0,1] - the output you want is [\e801]. So store your unicode in strings is the general idea.

writing escape character to CSS style using SASS

You can try unquoting the string

@function get-unicode($code) {
  @return unquote("\"\\e#{$code}\"");
}

&-#{$iconName}::before {
  content: get-unicode(602);
}