Skip to content

Instantly share code, notes, and snippets.

@ttilley
Created April 9, 2010 07:00
Show Gist options
  • Save ttilley/360950 to your computer and use it in GitHub Desktop.
Save ttilley/360950 to your computer and use it in GitHub Desktop.
// This yields a linear gradient spanning from top to bottom
+linear-gradient(color_stops(white, black))
This yields a linear gradient spanning from bottom to top
+linear-gradient(color_stops(white, black), "bottom")
This yields a linear gradient spanning from left to right
+linear-gradient(color_stops(white, black), "left")
This yields a linear gradient starting at white passing
thru blue at 33% down and then to black
+linear-gradient(color_stops(white, blue 33%, black))
This yields a linear gradient starting at white passing
thru blue at 33% down and then to black at 67% until the end
+linear-gradient(color_stops(white, blue 33%, black 67%))
Browsers Supported:
- Chrome
- Safari
- Firefox 3.6
=linear-gradient($color_stops, $start: top)
// Firefox's gradient api is nice.
Webkit's gradient api sucks -- hence these backflips:
$end: grad_opposite_position($start)
background-image: -webkit-gradient(linear, #{grad_point($start)}, #{grad_point($end)}, #{grad_color_stops($color_stops)})
background-image: -moz-linear-gradient(#{$start}, #{$color_stops})
// Due to limitation's of webkit, the radial gradient mixin works best if you use
pixel-based color stops.
Examples:
// Defaults to a centered, 100px radius gradient
+radial-gradient(color_stops(#c00, #00c))
// 100px radius gradient in the top left corner
+radial-gradient(color_stops(#c00, #00c), "top left")
// Three colors, ending at 50px and passing thru #fff at 25px
+radial-gradient(color_stops(#c00, #fff, #00c 50px))
Browsers Supported:
- Chrome
- Safari
- Firefox 3.6
=radial-gradient($color_stops, $center_position: unquote("center center"))
$end_pos: grad_end_position($color_stops, true)
background-image: -webkit-gradient(radial, #{grad_point($center_position)}, 0, #{grad_point($center_position)}, #{$end_pos}, #{grad_color_stops($color_stops)})
background-image: -moz-radial-gradient(#{$center_position}, circle, #{$color_stops})
diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.sass b/frameworks/compass/stylesheets/compass/css3/_gradient.sass
index 2e874e3..7912301 100644
--- a/frameworks/compass/stylesheets/compass/css3/_gradient.sass
+++ b/frameworks/compass/stylesheets/compass/css3/_gradient.sass
@@ -1,58 +1,57 @@
// This yields a linear gradient spanning from top to bottom
-//
-// +linear-gradient(color_stops(white, black))
-//
-// This yields a linear gradient spanning from bottom to top
-//
-// +linear-gradient(color_stops(white, black), "bottom")
-//
-// This yields a linear gradient spanning from left to right
-//
-// +linear-gradient(color_stops(white, black), "left")
-//
-// This yields a linear gradient starting at white passing
-// thru blue at 33% down and then to black
-//
-// +linear-gradient(color_stops(white, blue 33%, black))
-//
-// This yields a linear gradient starting at white passing
-// thru blue at 33% down and then to black at 67% until the end
-//
-// +linear-gradient(color_stops(white, blue 33%, black 67%))
-//
-// Browsers Supported:
-//
-// - Chrome
-// - Safari
-// - Firefox 3.6
+
+ +linear-gradient(color_stops(white, black))
+
+ This yields a linear gradient spanning from bottom to top
+
+ +linear-gradient(color_stops(white, black), "bottom")
+
+ This yields a linear gradient spanning from left to right
+
+ +linear-gradient(color_stops(white, black), "left")
+
+ This yields a linear gradient starting at white passing
+ thru blue at 33% down and then to black
+
+ +linear-gradient(color_stops(white, blue 33%, black))
+
+ This yields a linear gradient starting at white passing
+ thru blue at 33% down and then to black at 67% until the end
+
+ +linear-gradient(color_stops(white, blue 33%, black 67%))
+
+ Browsers Supported:
+
+ - Chrome
+ - Safari
+ - Firefox 3.6
-=linear-gradient(!color_stops, !start = "top")
+=linear-gradient($color_stops, $start: top)
// Firefox's gradient api is nice.
- // Webkit's gradient api sucks -- hence these backflips:
- !end = grad_opposite_position(!start)
- background-image: -webkit-gradient(linear, #{grad_point(!start)}, #{grad_point(!end)}, #{grad_color_stops(!color_stops)})
- background-image: -moz-linear-gradient(#{!start}, #{!color_stops})
+ Webkit's gradient api sucks -- hence these backflips:
+ $end: grad_opposite_position($start)
+ background-image: -webkit-gradient(linear, #{grad_point($start)}, #{grad_point($end)}, #{grad_color_stops($color_stops)})
+ background-image: -moz-linear-gradient(#{$start}, #{$color_stops})
// Due to limitation's of webkit, the radial gradient mixin works best if you use
-// pixel-based color stops.
-//
-// Examples:
-//
-// // Defaults to a centered, 100px radius gradient
-// +radial-gradient(color_stops(#c00, #00c))
-// // 100px radius gradient in the top left corner
-// +radial-gradient(color_stops(#c00, #00c), "top left")
-// // Three colors, ending at 50px and passing thru #fff at 25px
-// +radial-gradient(color_stops(#c00, #fff, #00c 50px))
-//
-// Browsers Supported:
-//
-// - Chrome
-// - Safari
-// - Firefox 3.6
-
-=radial-gradient(!color_stops, !center_position = "center center")
- !end_pos = grad_end_position(!color_stops, true)
- background-image: -webkit-gradient(radial, #{grad_point(!center_position)}, 0, #{grad_point(!center_position)}, #{!end_pos}, #{grad_color_stops(!color_stops)})
- background-image: -moz-radial-gradient(#{!center_position}, circle, #{!color_stops})
+ pixel-based color stops.
+
+ Examples:
+
+ // Defaults to a centered, 100px radius gradient
+ +radial-gradient(color_stops(#c00, #00c))
+ // 100px radius gradient in the top left corner
+ +radial-gradient(color_stops(#c00, #00c), "top left")
+ // Three colors, ending at 50px and passing thru #fff at 25px
+ +radial-gradient(color_stops(#c00, #fff, #00c 50px))
+
+ Browsers Supported:
+
+ - Chrome
+ - Safari
+ - Firefox 3.6
+=radial-gradient($color_stops, $center_position: unquote("center center"))
+ $end_pos: grad_end_position($color_stops, true)
+ background-image: -webkit-gradient(radial, #{grad_point($center_position)}, 0, #{grad_point($center_position)}, #{$end_pos}, #{grad_color_stops($color_stops)})
+ background-image: -moz-radial-gradient(#{$center_position}, circle, #{$color_stops})
@ttilley
Copy link
Author

ttilley commented Apr 9, 2010

unable to parse indent due to sass-convert multi-line comment conversion, comment starting the file, and first indented line having 3 spaces that were originally guarded by their own //. i could see this happening a lot when a file starts with a comment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment