Why won't this LESS css sizing mixin compile?

Question

I'm trying to create a mixin that'll take two parameters and output sizing in px and rem. This is the code:

.sizing (@cssProperty; @sizeValue) {
  @cssProperty: ((@sizeValue * @basefont) * 1px);
  @cssProperty: (@sizeValue * 1rem);
}

Usage would be like:

h2 {
  .sizing(font-size; 1)
}

Which should output (depending on what basefont size is defined):

h2 {
  font-size: 12px;
  font-size: 1rem;
}

But simpLESS won't compile it, and says there's an error in these two lines:

.sizing (@cssProperty; @sizeValue) {
.sizing(font-size; 1);

What am I doing wrong? Is it because of the variable property names?

I'm thinking it may be a syntax error in your `@cssProperty` declarations. Check this out: http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/ — Brian Ray, Oct 01 '13 at 13:32
possible duplicate of [How to pass a property name as an argument to a mixin in less](http://stackoverflow.com/questions/10689152/how-to-pass-a-property-name-as-an-argument-to-a-mixin-in-less) — Gurpreet Singh, Oct 01 '13 at 14:14

score 2 · Answer 1 · edited May 23 '17 at 12:03

2

Just noticed that you are trying to use variables as property names instead values which is not supported by less.

There is a hack highlighted in this answer as workaround:

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

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

edited May 23 '17 at 12:03

Community

1
1

answered Oct 01 '13 at 13:03

Gurpreet Singh

20,907
5
44
60

1

That's weird, on their website it says that semicolon is recommended: *Parameters are either semicolon or comma separated. It is recommended to use semicolon.* [Source](http://lesscss.org/#-parametric-mixins) – Oct 01 '13 at 13:04
Not sure, never used semicolon before. Let me know if this works. – Gurpreet Singh Oct 01 '13 at 13:06
Well it returns a compiler error, so I guess it doesn't :). Might be the compiler. By the way, after your changes it compiles without errors, but the mixin doesn't return anything (so no font-sizes as in my example), any ideas why it doesn't work? – Oct 01 '13 at 13:11
Speaking of comma vs. semicolon in a argument list - well, it's just a recommendation of one or two developers behind the LESS... Indeed, in some (pretty much rare and quite advanced use-case) situations commas may have some unexpected side effects when expanding those variables in a CSS values (mainly because many CSS properties also use comma as their value delimiter)... But LESS community still uses commas (and no doubt *will* use commas for obvious reasons) so be prepared to shock your code readers if you choose to go a semicolon way :) – seven-phases-max Oct 01 '13 at 14:03

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

LESS does not allow to use a variable as a CSS property name.

In your code above @cssProperty: ((@sizeValue * @basefont) * 1px); is actually a definition of the new @cssProperty variable and not a CSS property: value statement, hence it produces no CSS output.

There's a workaround for what you want to achieve though, see 14868042, 18558368 etc...

edited May 23 '17 at 10:32

Community

1
1

answered Oct 01 '13 at 13:47

seven-phases-max

11,765
1
45
57

Why won't this LESS css sizing mixin compile?

2 Answers2