linear-gradient function #177

Closed
fmal opened this Issue Feb 3, 2013 · 6 comments

Comments

Projects
None yet
3 participants
@fmal

fmal commented Feb 3, 2013

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

This comment has been minimized.

Show comment Hide comment
@plapier

plapier Feb 19, 2013

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 commented Feb 19, 2013

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

This comment has been minimized.

Show comment Hide comment
@plapier

plapier Apr 3, 2013

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 commented Apr 3, 2013

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 Apr 3, 2013

@robwierzbowski

This comment has been minimized.

Show comment Hide comment
@robwierzbowski

robwierzbowski Oct 16, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@fmal

fmal Oct 16, 2013

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

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

fmal commented Oct 16, 2013

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

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

This comment has been minimized.

Show comment Hide comment
@robwierzbowski

robwierzbowski Oct 23, 2013

PR on the way.

PR on the way.

@robwierzbowski

This comment has been minimized.

Show comment Hide comment
@robwierzbowski

robwierzbowski Nov 25, 2013

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.

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