Compass ignoring hue and shadow functions in the SCSS file

Question

I have a problem compiling multiple SCSS files using a compass. Basically, tint and shade functions are ignored. So this is:

 border:solid 1px tint( $custom-ui-base-color, 5% ); background-color:shade( $custom-ui-base-color, 15% ); 

becomes the following:

 border: solid 1px tint(#096fcb, 5%); background-color: shade(#096fcb, 15%); 

Which is clearly invalid CSS. The compass replaced the variables but did not calculate the functions, is there any reason why this could be so? Perhaps a parameter or command line argument in the compass?

Answer 1

I know this is late, but I had the same problem until I found out that I could just use the mix() function. It may be useful for other people. mix() can tint your existing color with any color you want. Therefore, to color it white (which you think you need), you simply do it like this:

$color: mix(white,$color, 15%);

the first argument is the color in which you want to specify your primary color, the second argument is your color, and the third argument is the amount of color (in this case white) that you want to mix with the primary color.

So in my case, I mixed with 15% white.

Answer 2

I dig a dig, and it seems that these functions were added to the Compass core about a year ago , although I did not dig further to see which version they entered.

Hue and shadow are not built-in SASS color functions. Compass documentation refers to them, but the corresponding SASS documents are not . Thus, they should be a complement to Compass and may be available as an optional extension to the library.

Examples of Net Magazine makes you seem like you are using them correctly. So, I'm not sure where to point you, but you can try to debug the functions a bit more to see if you can compile them. Try using shade( #{$custom-ui-base-color}, 15% ) to run, which forces Compass to do one calculation before another (in this case, simply compiling the variable).

Ruby documentation of functions: http://ruby-doc.org/gems/docs/c/compass-0.12.2/Compass/SassExtensions/Functions/Colors.html

Good luck