CODEWITHSUNDEEP
sassless
Adam
Adam

Reputation: 1459

How to convert this SCSS mixin to LESS?

I am used to coding in SCSS but pretty new to LESS.

I have the following code in SCSS but would like to know how to write this in LESS.

Here is the SCSS code... 

@mixin posL($property, $value) {
   {$property}: $value;
}

.box {
   width:200px;
   height:200px;
   background:red;
   position:absolute;
   @include posL(left, 100px);
 }

So far I have something like this in LESS but I have to declare selectors...

.posL(@property: 100px, @value: 2px) {
    left: @property;
    -rtl-left: @value;
}

.box {
    width:200px;
    height:200px;
    background:red;
    position:absolute;
   .posL(200px);
 }

Is there a better way to write my LESS code so the selectors in the mixin remain generic (not specified)?

Upvotes: 2

Views: 5055

Answers (1)

ScottS
ScottS

Reputation: 72281

Update for LESS 1.6+

It is almost a direct mapping now with the 1.6 update, like so:

LESS

.posL(@property, @value) {
   @{property}: @value;
}

.box {
   width:200px;
   height:200px;
   background:red;
   position:absolute;
   .posL(left, 100px);
 }

CSS Output

.box {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 100px;
}

Original Answer (pre 1.6)

There is currently no real way to do dynamic property names in LESS (whether for prefixing or for full property names ,like you want), though there is discussion about it.

I recommend a generic mixin with a nested, guarded mixin for the logic. This still gives you selection to specific properties, but does require some more explicit code to set it up. Something like:

.posL(@property, @value) {
   .getProp(left) {
      left: @value;
    }
   .getProp(-rtl-left) {
      -rtl-left: @value;
   }
   .getProp(@property);
}

Then use it very similar to how you do the SASS version:

.box {
   width:200px;
   height:200px;
   background:red;
   position:absolute;
   .posL(left, 100px);
 }

Compiles to:

.box {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 100px;
}

Upvotes: 1

Related Questions