Search code examples
sasscompass-sass

Including a fallback solid color in a Compass Sass gradient?

I am using compass on my site, and have created a style such as: 

@include background-image(linear-gradient(top, #C9C9C9, #FFF));

The problem is, this doesn't incluse a solid-color fallback for older IEs. Do I simply have to include a line like

background-color: #c9c9c9;

Or is there a way to have Compass handle this automatically for me?

Solution

  • As far as I know there is no way in Compass to have the background color automatically computed from a background-image declaration, because of the way it is built : you could have several gradients in there, and Compass can't really know which of all those colors is supposed to be the base one.

    One way I advice is to create a gradient-wrapper like the following :

    =gradient-horizontal($startColor: #555555, $endColor: #333333)
    background-color: $endColor
    background-color: mix($startColor, $endColor) // Second possibility
    +filter-gradient($startColor, $endColor, horizontal)
    +background-image(linear-gradient(left, $startColor, $endColor))