pass property name as an argument in a mixin LESS

Question

I am a newbie at less. I am trying to pass css property as an argument like this

.border(@position:"left",@color: #ddd){
    border-@position :1px solid @color;   
}

means that every time I type

.border(right,#efefef);

it should output

border-right:1px solid #efefef;

I am using winless to compile the code Winless version 1.8.3 and LESS.js version 1.7.3

Winless compiler gives error

ParseError: Unrecognised input in "My-file-path" on line "line No. etc"

in my search for the answers I found these questions they are about 1 year old and they say that it is not possible (at that time) because it is not supported by LESS is it possible now?

How to pass a property name as an argument to a mixin in less

the answer in this question uses a hack to achieve the goal should I use this

.mixin(@prop, @value) {
    Ignore: ~"a;@{prop}:@{value}";
}

Send properties as argument for mixin

ANSWER:

found the answer here thanks for one of the comment

this solved the problem I almost got it right when I asked the question just had to add curly braces to the css property argument

.border(@position:"left";@color:#ddd){
    border-@{position}:1px solid @color;
}

that can be used

.border(right,#efefef)

so this compiles to :

border-right: 1ps solid #efefef;

Using variables in property names in LESS (dynamic properties / property name interpolation)

See http://stackoverflow.com/search?tab=votes&q=%5bless%5d%20property%20name. Also [the docs](http://lesscss.org/features/#variables-feature-properties) never harm. — seven-phases-max, Jul 07 '14 at 00:29

score 5 · Accepted Answer · edited May 23 '17 at 11:57

5

I think this is what you are trying to do:

//A simple Border Mixin to start
.borderMixin(@color: #ddd){
    border: 1px solid @color;
}
 //Using the Mixin
 .border{
  .borderMixin(@color: #ddd);
    &-right {
      .borderMixin(@color: #F01);
    }
    &-left {
      .borderMixin(@color: #000);
    }
}

So first I've declared the Mixin helper to be used and then I used it and re-use it exending the class name with the & character

That will output this in your CSS:

/*********
*The resulted css code:
*/
.border {
  border: 1px solid #dddddd;
}
.border-right {
  border: 1px solid #ff0011;
}
.border-left {
  border: 1px solid #000000;
}

UPDATE:

+Harry suggests this:

.borderMixin(@position: left, @color: #ddd){
  border-@{position}: 1px solid @color;   
}

.border{
    width: 200px;
  .borderMixin(right,#222);
  .borderMixin(left,#222);
}

edited May 23 '17 at 11:57

Community

1
1

answered Jul 07 '14 at 02:10

hailton

591
1
3
15

This doesnt seem to be exactly in line with what OP wants (though the concept required is similar). This produces a full border (all sides) for all cases because irrespective of your selector class, the property is the same. You need to set the right/left to the property like [this](http://codepen.io/hari_shanx/pen/BucLa). – Harry Jul 07 '14 at 04:26
1

Yep, that's an improved way to solve the problem with less code written. I'll update the answer with your sugestion. Thank you – hailton Jul 07 '14 at 04:39
Welcome mate :) By the way, that `width` was added only for illustration so that is not required too. – Harry Jul 07 '14 at 05:14
Yep that is exactly what I was looking for found the answer that solved the problem here http://stackoverflow.com/questions/14868042/using-variables-in-property-names-in-less-dynamic-properties-property-name-in/15443008#15443008 – Abdul Rafay Shaikh Jul 07 '14 at 05:31

pass property name as an argument in a mixin LESS

1 Answers1