CODEWITHSUNDEEP
less
Vaughn D. Taylor
Vaughn D. Taylor

Reputation: 637

Issues creating cross-browser gradient with LESS CSS

This is my LESS Mixin:

.gradient (@start, @stop) {
    background: ~"#@{start}";
    background: ~"-moz-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
    background: ~"-webkit-gradient(linear, left top, left bottom, color-stop(0%,#@{start}), color-stop(100%,#@{stop}))";
    background: ~"-webkit-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
    background: ~"-o-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
    background: ~"-ms-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
    background: ~"linear-gradient(to bottom, #@{start} 0%, #@{stop} 100%)";
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#00@{start}', endColorstr='#00@{stop}', GradientType=0 )";
};

This is how I'm calling it:

.multi-button {
    .gradient (ffffff, ededed);
}

When compiled I get this (which is correct):

.multi-button {
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed));
  background: -webkit-linear-gradient(top, #ffffff 0%, #ededed 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #ededed 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #ededed 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #ededed 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ededed', GradientType=0 );
}

I've removed the "#" when calling the Mixin because I want to be able to add the additional alpha info into the MS filter without getting the following:

#00#ffffff

However, this does not work in all cases and I'm not sure why? The above works, but in another gradient I get different results. This is how I'm calling the Mixin:

.quick-button.blue {
    .gradient (67c2ef, 00a2ed);
}

When compiled, I get this:

.quick-button.blue {
  background: #[object Object],[object Object];
  background: -moz-linear-gradient(top, #[object Object],[object Object] 0%, #[object Object],[object Object] 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#[object Object],[object Object]), color-stop(100%,#[object Object],[object Object]));
  background: -webkit-linear-gradient(top, #[object Object],[object Object] 0%, #[object Object],[object Object] 100%);
  background: -o-linear-gradient(top, #[object Object],[object Object] 0%, #[object Object],[object Object] 100%);
  background: -ms-linear-gradient(top, #[object Object],[object Object] 0%, #[object Object],[object Object] 100%);
  background: linear-gradient(to bottom, #[object Object],[object Object] 0%, #[object Object],[object Object] 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00[object Object],[object Object]', endColorstr='#00[object Object],[object Object]', GradientType=0 );
}

I'm using CodeKit 1.3.5 to compile. I'm not getting any compilation errors, but obviously something is wrong.

Upvotes: 1

Views: 1024

Answers (1)

Vaughn D. Taylor
Vaughn D. Taylor

Reputation: 637

UPDATE - PROBLEM RESOLVED

This is my Mixin:

.gradient (@start, @stop) {
    background: ~"#@{start}";
    background: ~"-moz-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
    background: ~"-webkit-gradient(linear, left top, left bottom, color-stop(0%,#@{start}), color-stop(100%,#@{stop}))";
    background: ~"-webkit-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
    background: ~"-o-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
    background: ~"-ms-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
    background: ~"linear-gradient(to bottom, #@{start} 0%, #@{stop} 100%)";
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#00@{start}', endColorstr='#00@{stop}', GradientType=0 )";
};

And this is how I call it:

.gradient ('eeeeee', 'f9f9f9');

The key is to wrap the HEX values in single quotes. I'm not 100% sure why it parses correctly sometimes and not others, but this resolved the issue.

Upvotes: 3

Related Questions