Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I turn off SASS RGB -> Color Name

Tags:

css

sass

I have a CSS rule like this:

background: #fff url('/assets/img/file.png');

It is compiling to:

background: white url("/assets/img/file.png");

Is there any way to prevent it from converting it like that? There is JS on my page that looks for RGB values and I don't want to have to convert those strings to RGB in some hacky function.

like image 716
Dave Stein Avatar asked Mar 08 '12 01:03

Dave Stein


People also ask

How do I change colors in sass?

Sass Set Color FunctionsSets a color using the Red-Green-Blue (RGB) model. An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255, or a percentage value (from 0% to 100%).

Is sass the same as SCSS?

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax.


1 Answers

By default, Sass will not convert literal color values from their hex values unless you are forcing Sass to interpolate with #{} or a variable.

Using interpolation will return the "to_sass" version of the value you're interested in. For example, #{ #fff } will interpolate to "white". This also happens during variable replacements: color literals are translated to Color objects when used as variables, then "to_sass"ed into your stylesheet.

Furthermore, you may specify the style option compressed, which will return the less byte-length version (i.e. red instead of #f00). Since white is 5 characters long and #fff is only 4, your rule will replace with #fff instead.

There is no way to turn off the reverse HTML4 color name conversion when using variables. As a work-around, you can declare color variables as a string, then use then in styles with the unquote() function.

$color: '#fff';
.white { color: unquote($color) }
like image 122
Aintaer Avatar answered Sep 18 '22 13:09

Aintaer