1

I'm starting with SASS/Compass and i'm in trouble right now.

I want to translate this CSS code

-moz-border-top-colors: #c2c2c2 #d3d3d3 #ebebeb 
-moz-border-right-colors: #c2c2c2 #d3d3d3 #ebebeb
-moz-border-bottom-colors: #c2c2c2 #d3d3d3 #ebebeb
-moz-border-left-colors: #c2c2c2 #d3d3d3 #ebebeb

Into some SASS/Compass beautiful code. I think that it should be something like

border: 3px solid @inclue linear-gradient(#c2c2c2, #ebebeb)

I've searched the Compass documentation but couldn't find the answer. Anyone?

Thanks!

Mateus Pinheiro
  • 870
  • 2
  • 12
  • 20
  • 3
    How do you like SAAS? I think it's the greatest thing to happen to CSS since CSS. – Adam Mar 15 '11 at 03:26

1 Answers1

4

First, make sure that you have included the linear-gradient mixin, by adding the following line to your scss file:

@import "compass/css3/gradient"

Then you can use the linear-gradient mixin for any property within a style, like so:

@include: linear-gradient($color-stops, [$start], [$image]);

For example:

@include linear-gradient(color-stops(#c2c2c2, #d3d3d3, #ebebeb));

Would yield a border going from the top to the bottom, starting with c2..., passing through, d3..., and ending with eb....

You can also make the border go from bottom to top, by passing the value bottom to the start parameter:

@include linear-gradient(color-stops(#c2c2c2, #d3d3d3, #ebebeb), bottom);

Or left to right (or vice versa)

@include linear-gradient(color-stops(#c2c2c2, #d3d3d3, #ebebeb), left)

You can pass an image url to superimpose the border over a background image, too.

See this page for a working example with sample code:

http://compass-style.org/docs/examples/compass/css3/gradient/#scss

Adam
  • 12,236
  • 9
  • 39
  • 44