Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

linear-gradient function #177

Closed
fmal opened this Issue · 6 comments

3 participants

@fmal

I find the linear-gradient mixin not flexible enough, so sometimes i want to handcode my gradients using plain css.

I have a following code:

body.grid {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 98%, hsla(0,25%,50%,.5) 98%);
    background-image:    -moz-linear-gradient(hsla(0,0%,0%,0) 98%, hsla(0,25%,50%,.5) 98%);
    background-image:      -o-linear-gradient(hsla(0,0%,0%,0) 98%, hsla(0,25%,50%,.5) 98%);
    background-image:         linear-gradient(hsla(0,0%,0%,0) 98%, hsla(0,25%,50%,.5) 98%);
    background-position: 50% 0;
    background-size: #{$base-line-height / $base-font-size}em;
}

but the Bourbon's linear-gradient function is breaking the last gradient declaration (standards one).

The output is:

body.grid {
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 98%, rgba(159, 96, 96, 0.5) 98%);
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 98%, rgba(159, 96, 96, 0.5) 98%);
  background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 98%, rgba(159, 96, 96, 0.5) 98%);
  background-image: linear, rgba(0, 0, 0, 0) 98%, rgba(159, 96, 96, 0.5) 98%;
  background-position: 50% 0;
  background-size: 1.5em;
}

Is it possible to namespace this function or something so it doesn't break normal CSS?

Btw i suggest you remove -ms-linear-gradient from the linear-gradient mixin and please update to the newer syntax (http://www.broken-links.com/2012/01/11/the-new-and-hopefully-final-linear-gradient-syntax/)

Thanks!

@plapier

Thanks @fmal, I'll add this as a todo. I can see why you may want to be able to render the spec.
For the time being, you could get around this by doing:

    background: unquote( "linear-gradient(red, green)" );
@plapier

On second look, Bourbon can handle the linear-gradient you're generating. I suggest you use the background-image mixin. It can handle all test cases I throw at it.

@include background-image( linear-gradient( hsla(0,0%,0%,0) 98%, hsla(0,25%,50%,.5) 98% ));

Output

background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 98%, rgba(159, 96, 96, 0.5) 98%);
background-image:    -moz-linear-gradient(rgba(0, 0, 0, 0) 98%, rgba(159, 96, 96, 0.5) 98%);
background-image:     -ms-linear-gradient(rgba(0, 0, 0, 0) 98%, rgba(159, 96, 96, 0.5) 98%);
background-image:      -o-linear-gradient(rgba(0, 0, 0, 0) 98%, rgba(159, 96, 96, 0.5) 98%);
background-image:         linear-gradient(rgba(0, 0, 0, 0) 98%, rgba(159, 96, 96, 0.5) 98%);

I'm working on an updated mixin for outputting the new gradient spec. It's proving harder than I thought due to the spec changes. It's a WIP but you can view the commits here: https://github.com/thoughtbot/bourbon/commits/pl-linear-gradient-spec

@plapier plapier closed this
@robwierzbowski

I came here to register the same issue. Sass functions shouldn't override CSS functions in a way that breaks writing valid CSS. My workflow:

I use autoprefixer for prefixing — I write the spec and a post processor adds the necessary prefixes.
Our team would like to use Neat as a grid framework.
I have to unquote()s all of my linear gradient functions. :(

generate-linear() might be a better name. Anything that lets me write spec would be great.

@fmal

I use autoprefixer too. Please fix this issue. Right now i have to write something like:

background-image: #{ "linear" }-gradient(...);
@robwierzbowski

PR on the way.

@robwierzbowski

These are the functions I'm using to reset linear gradients in the interim:

@function linear-gradient($value...) {
  @return unquote('linear-gradient(#{$value})');
}

@function radial-gradient($value...) {
  @return unquote('radial-gradient(#{$value})');
}

They break the Bourbon gradient mixins, but most of us with this issue are using Autoprefixer anyways.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.