CODEWITHSUNDEEP
csssasscompass-sassscout-sass
Fer
Fer

Reputation: 4196

SASS/Compass inconsistent in writing RGBA values in output stylesheet

I'm on Windows 7 making use of the Scout app for convenient SASS/Compass compilation without the hassle of configuring it all:

http://mhs.github.com/scout-app/

I've set it up to monitor my scss folder and to output main.css to my css folder, and it works. However I am having a very frustrating time at times on an issue that seems related to the order in which things are saved.

For example, I have a rule like this:

@include background-with-css2-fallback(image-url("bg_skin.png"),image-url("bg_noise.png"),linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.4)),$color-header-background url(../img/bg_skin.png));

This creates a background consisting of two layered PNGs with a semi-trasparent gradient applied to it. On older browsers, a base color and single PNG is applied. In normal circumstances, this would create the follow CSS. Note that the above generates dozens of lines, I'm only showing the one relevant for now:

background: url('img/bg_skin.png?1339414190'), url('img/bg_noise.png?1339150807'), -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), #b9d233 url(../img/bg_skin.png);

All is well. In this same file, which is my main scss file, at the end I am importing a partial like this:

@media screen and (max-width: 940px) {  @import 'tablet'; }

When I make a change to that partial file (_tablet.scss), Scout will detect it and recompile everything. However, in doing so it suddenly results in a different rule concerning the background rule I mentioned earlier:

background: url('img/bg_skin.png?1339414190'), url('img/bg_noise.png?1339150807'), -moz-linear-gradient(top, rgba 0, 0, 0, 0), rgba(0, 0, 0, 0)), #b9d233 url(../img/bg_skin.png);

It is now creating a gradient from 0 to 0, rather than from 0 to 0.4! Out of the blue.

I have found that editing my main.scss file again and saving it, once again leads to the correct gradient rule, yet then it messes up similar rules in the parial. Resaving the partial file will fix the partial CSS but then it messes up the main rules again. It's a total deadlock situation.

What I want is for both my main SCSS and partial SCSS files to be compiled correctly. I can live with a situation in which I need to save these files in a certain order, but right now every order leads to the wrong result.

Is this a common problem or is it a setup problem? Any suggestions?

Upvotes: 2

Views: 906

Answers (2)

Sebastien Axinte
Sebastien Axinte

Reputation: 127

You can try to use a division instead of using the decimal number. Ex : 0.5 > 5/10.

Works for me, i'm on MACOSX LION / Textmate / Scout / Firefox 15

Upvotes: 3

Fer
Fer

Reputation: 4196

After a bit more digging, I found the cause of the problem:

https://github.com/mhs/scout-app/issues/44

The issue is indeed in rgba values not being compiled correctly. Specifically, it only works correctly for the last-saved file, which is consistent with my problem. Unfortunately, for my setup (Scout on Windows), there is no solution yet, but appearantly the dev team is working on it.

Upvotes: 3

Related Questions