diff --git a/lib/compass/sass_extensions/functions/gradient_support.rb b/lib/compass/sass_extensions/functions/gradient_support.rb index 34dcbadf..f3b14e0d 100644 --- a/lib/compass/sass_extensions/functions/gradient_support.rb +++ b/lib/compass/sass_extensions/functions/gradient_support.rb @@ -6,10 +6,10 @@ module Compass::SassExtensions::Functions::GradientSupport self.values = values end def inspect - to_s + values.map{|v| v.inspect}.join(", ") end def to_s - values.map{|v| v.to_s}.join(", ") + inspect end end @@ -22,13 +22,13 @@ module Compass::SassExtensions::Functions::GradientSupport to_s end def to_s - s = "#{color}" + s = color.inspect.dup if stop s << " " if stop.unitless? - s << stop.times(Sass::Script::Number.new(100, ["%"])).to_s + s << stop.times(Sass::Script::Number.new(100, ["%"])).inspect else - s << stop.to_s + s << stop.inspect end end s @@ -60,7 +60,7 @@ module Compass::SassExtensions::Functions::GradientSupport # have to convert absolute units to percentages for use in color stop functions. stop = pos.stop stop = stop.div(max).times(Sass::Script::Number.new(100,["%"])) if stop.numerator_units == max.numerator_units - "color-stop(#{stop}, #{pos.color})" + "color-stop(#{stop.inspect}, #{pos.color.inspect})" end Sass::Script::String.new(color_stops.join(", ")) end @@ -129,22 +129,22 @@ module Compass::SassExtensions::Functions::GradientSupport when Sass::Script::Color ColorStop.new(arg) when Sass::Script::String - color, stop = arg.value.split(/ +/, 2) - color = Sass::Script::Parser.parse(color, 0, 0) - if stop =~ /^(\d+)?(?:\.(\d+))?(%)?$/ - integral, decimal, percent = $1, $2, $3 - number = "#{integral || 0}.#{decimal || 0}".to_f - number = number / 100 if percent - if number > 1 - raise Sass::SyntaxError, "A color stop location must be between 0#{"%" if percent} and 1#{"00%" if percent}. Got: #{stop}" + color = stop = nil + expr = Sass::Script::Parser.parse(arg.value, 0, 0) + case expr + when Sass::Script::Color + color = expr + when Sass::Script::Operation + unless expr.instance_variable_get("@operator") == :concat + raise Sass::SyntaxError, "Couldn't parse a color stop from: #{arg.value}" end - stop = Sass::Script::Number.new(number) - elsif !stop.nil? - number = Sass::Script::Parser.parse(stop, 0, 0) - unless number.is_a?(Sass::Script::Number) - raise Sass::SyntaxError, "A color stop location must be a number. Got: #{stop}" - end - stop = number + color = expr.instance_variable_get("@operand1") + stop = expr.instance_variable_get("@operand2") + when Sass::Script::Funcall + color = expr + else + puts expr.class.name + raise Sass::SyntaxError, "Couldn't parse a color stop from:: #{arg.value}" end ColorStop.new(color, stop) else diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css index dcdf94b0..4f6b07ac 100644 --- a/test/fixtures/stylesheets/compass/css/gradients.css +++ b/test/fixtures/stylesheets/compass/css/gradients.css @@ -23,8 +23,8 @@ background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); } .linear-7 { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(50.1%, #eeeeee), color-stop(100%, #aaaaaa)); - background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 50.1%, #aaaaaa 100%); } + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa)); + background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); } .linear-8 { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa)); @@ -69,3 +69,7 @@ .radial-7 { background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa)); background-image: -moz-radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); } + +.alpha-linear { + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, rgba(255, 255, 255, 0)), color-stop(90%, rgba(255, 127, 127, 0.5)), color-stop(100%, rgba(255, 255, 255, 1))); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, rgba(255, 255, 255, 1) 50%); } diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass index 43141bf8..8d27f4c6 100644 --- a/test/fixtures/stylesheets/compass/sass/gradients.sass +++ b/test/fixtures/stylesheets/compass/sass/gradients.sass @@ -46,3 +46,6 @@ // A centered elliptical gradient with color stops // The color stops must be relative units +radial-gradient(color_stops(#ddd 20%, #aaa 50px)) + +.alpha-linear + +linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%)) \ No newline at end of file