Question

I have several gradients needed for a site that can appear in buttons, boxes and pages. I thought I would have a go at LESS CSS to minimise the repetition in the stylesheet.

So far i have:

.gradient (@origin: bottom, @start: #000, @end: #333){
background: @start;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(@end), to(@start));
background: -webkit-linear-gradient(@origin, @start, @end);
background: -moz-linear-gradient(@origin, @start, @end);
background: -ms-linear-gradient(@origin, @start, @end);
background: -o-linear-gradient(@origin, @start, @end);
background: linear-gradient(@origin, @start, @end);
-pie-background: linear-gradient(@origin, @start, @end);
behavior: url(/PIE.htc);
}

I’m wanting to use @argument similar to this example so i can call the different colors:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

Can this be done with the hex or RGB (@color: 0 ??)or have i got the wrong logic here to go about this? thanks.

Answer 1

You can’t do that because, as you can see in your code, some browsers use different syntaxes for css gradients and using the @arguments variable would create invalid css for some browsers.

What you can do is “group” the properties that use the same syntax and shorten your code slightly:

.gradient (@origin: bottom, @start: #000, @end: #333){
    background: @start;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(@end), to(@start));
    background: -webkit-linear-gradient(@arguments);
    background: -moz-linear-gradient(@arguments);
    background: -ms-linear-gradient(@arguments);
    background: -o-linear-gradient(@arguments);
    background: linear-gradient(@arguments);
    -pie-background: linear-gradient(@arguments);
    behavior: url(/PIE.htc);
}