CODEWITHSUNDEEP
sasscompass-sass
Steve
Steve

Reputation: 14922

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?

Upvotes: 1

Views: 794

Answers (1)

Maxime Fabre
Maxime Fabre

Reputation: 2252

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))

Upvotes: 2

Related Questions