Is it possible to use CSS Function from a Less variable?

Question

What I basically want to do

@gradientType: radial-gradient;

background: @gradientType(to bottom, ...)

I want to put a CSS Function, a gradient in this case (btw: are these called functions? I'm not sure) in a Less variable and call it later with the variable like @variable()?

Why? Maintainability!

I have a file variables.less where I want to change to gradient (ie) for a couple of places on the fly.

So instead of

.a { background: linear-gradient(..) }    
.b { background: linear-gradient(..) }    
.c { background: linear-gradient(..) }

I would have something like

.a { background: @myGradient(..) }    
.b { background: @myGradient(..) }    
.c { background: @myGradient(..) }

Linear gradients (linear-gradient(to bottom, red, blue)) and Radial gradients (radial-gradient(circle, red, blue)) kind of have the same syntax. So I would have four variables like gradientType, gradientOpts, gradientStart, gradientStop and change the gradient type based on the variable. This is just a simplified example.

There is a way but before answering I'd like to know the actual use-case just to see if there is a better option. What is the purpose behind putting this into a variable? — Harry
– Harry, Commented Dec 24, 2015 at 1:38
Ok, I will give the solution in answer. But I still don't get it fully. You can't use the same syntax (or parameters) as a linear-gradient for a radial-gradient. The first param is different for the two. — Harry
– Harry, Commented Dec 24, 2015 at 1:44
not necessarily. linear-gradient(to bottom, red, blue) and radial-gradient(circle, red blue) have kinda the same syntax. So I would have four variables like gradientType, gradientOpts, gradientStart and gradientStop. It's a simplified example — boop
– boop, Commented Dec 24, 2015 at 1:47

Harry · Accepted Answer · 2015-12-24 02:03:42Z

3

To answer your question directly, you can use variable interpolation to achieve this.

@myGradient: radial-gradient;

.a { background: ~"@{myGradient}(to bottom, red, blue)"; }    
.b { background: ~"@{myGradient}(to bottom, green, yellow)"; }    
.c { background: ~"@{myGradient}(to bottom, orange, gold)"; }

But I would suggest using something like a parameterized mixin to handle things like this. Below is the code for a sample mixin which creates either a radial-gradient or linear-gradient depending on the input variable.

@gradType: linear-gradient;

.a { .background(@gradType; to bottom; red; blue); }    
.b { .background(@gradType; to bottom; green; yellow); }    
.c { .background(@gradType; to bottom; orange; gold); }

.background(@gradType; @gradOpts; @gradStart; @gradEnd){
  & when (@gradType = linear-gradient){
    background: linear-gradient(@gradOpts, @gradStart, @gradEnd);
  }
  & when (@gradType = radial-gradient){
    background: radial-gradient(@gradOpts, @gradStart, @gradEnd);
  }  
}

The catch with using guarded mixins (like the above) is that when the @gradType variable has a value outside of the two possible ones (say conical-gradient was the value) then the code would just fail and will not cause any errors to be thrown. This would be a problem when you're writing a library that is going to be used by others (and so want to throw an error when the value is invalid). In such cases, you could change the code like given below. When this approach is used, Less compiler would throw an error when an invalid input value is provided for the @gradType variable.

@gradType: linear-gradient;

.a { .background(@gradType; to bottom; red; blue); }    
.b { .background(@gradType; to bottom; green; yellow); }    
.c { .background(@gradType; to bottom; orange; gold); }

.background(linear-gradient; @gradOpts; @gradStart; @gradEnd){
  background: linear-gradient(@gradOpts, @gradStart, @gradEnd);
}
.background(radial-gradient; @gradOpts; @gradStart; @gradEnd){
  background: radial-gradient(@gradOpts, @gradStart, @gradEnd);
}

edited Dec 24, 2015 at 2:03

answered Dec 24, 2015 at 1:48

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

boop Over a year ago

Just to clarify: I know a mixin would be an option too. I was more curios if this would work than actually using this. I just like to know some neat tips&tricks.. ;)

Harry Over a year ago

@Brettetete: No problems. I just wanted to make sure that you were choosing this option as an informed decision. Sometimes people who are using a language/tool newly would tend to do things the hard way. I would add a mixin sample also to the answer shortly :)

Collectives™ on Stack Overflow

Is it possible to use CSS Function from a Less variable?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related