.less output variable not declaration

Question

I know that you can do this in SASS

@pxtoem(@target, @context) {
 (@target/@context)+0em }

.something{
  font-size: @pxtoem(24, 16);
}

Is this possible in .less? Sorry my understanding here is quite limited but it seems to me that .less is expecting the calculation to output a css declaration?

Just to be clear, I don't want to have a mixin for each time I need to use this (bg position, font-size, line height etc)

Thanks

ScottS · Accepted Answer · 2013-02-08 19:17:36Z

2

Yes, from mixins, LESS outputs CSS declarations or a variable but not a value.

Best for your situation

The easiest way to get what you want is to avoid a mixin and just use ordinary operations and the unit() function:

.something {
    font-size: unit(24 / 16, em);
}

Outputs:

.something {
  font-size: 1.5em;
}

Outputting a Variable

A variable can be output, but it will still function with the normal scoping and "constant" type behavior of a LESS variable. So consider the following code. It shows that used once, it works fine (#1), but twice gives only the final value calculated for both items (#2), so to avoid that, if you needed to call it more than once per class block, you would need to get into some serious nesting of mixins within that class (#3).

.divideToEm(@target, @context) {
   @divideToEm: (@target / @context) + 0em;
}

.something { /* #1 */
   .divideToEm(24, 16);
   font-size: @divideToEm;
}

.somethingElse { /* #2 */
   .divideToEm(24, 16);
   font-size: @divideToEm;
   .divideToEm(12, 24);
   margin-right: @divideToEm;
}

.somethingElse2 { /* #3 */
   .setSize() {
   .divideToEm(24, 16);
    font-size: @divideToEm;
   }
   .setMargin() {
   .divideToEm(12, 24);
   margin-right: @divideToEm;
  }
  .setSize();
  .setMargin();
}

Outputs:

.something {
  font-size: 1.5em;
}
.somethingElse {
  font-size: 0.5em; /* <-- probably NOT expected */
  margin-right: 0.5em;
}
.somethingElse2 {
  font-size: 1.5em;
  margin-right: 0.5em;
}

edited Feb 8, 2013 at 19:17

answered Feb 8, 2013 at 17:19

ScottS

72.4k13 gold badges131 silver badges155 bronze badges

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

2 Comments

user1010892 Over a year ago

Thankyou for such a fantastic and detailed response. I think I'll use the unit function... but it's starting to feel a little like I sass is winning.

user1010892 Over a year ago

Just in incase anyone else looks at this. The unit function was less 1.3.2 . Thought that might be useful as I just spent 2 hours wondering why it wouldn't compile when my compiler was out of date!

Collectives™ on Stack Overflow

.less output variable not declaration

1 Answer 1

Best for your situation

Outputting a Variable

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Best for your situation

Outputting a Variable

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related