Samuel Samuel - 28 days ago 5
Less Question

Change unit in a mixin

Let's say I have a LESS mixin that changes any unit to vw.

.change-unit (@property, @value) {
@{property}: unit(@value, vw);
}


Then calling
.change-unit(width, 10px)
will result in
width: 10vw;


I would like to change px to vw in a similar way with blur effect in filter.

How should I change my mixin if after calling
.change-unit(filter, blur(5px))
I want to get
filter: blur(5vw);
? Is this possible?

Answer Source

You could add a third parameter just when you are using a filter that modifies the value:

.change-unit (@property, @value) {
  @{property}: unit(@value, vw);
}

.change-unit (@property, @value, @function) {
  @converted: unit(@value, vw);
  @{property}: ~'@{function}(@{converted})';
}

#no-filter {
    .change-unit(width, 10px);
}

#filter {
    .change-unit(filter, 5px, blur); 
}

Most of the time you would use the mixin as-is, but when you need to use a function, you would just add the name of the function as the third parameter.