LESS mixins with multiple parameters raises syntax error - css

Question

I wrote this followed the documentation of the LESS website, the mixins part, which I thought would work but raises a syntax error:
SyntaxError: properties must be inside selector blocks, they cannot be in the
root. in less/style.less on line 3, column 3:
2 .bg (#x; #y) {
3 background-position: unit(#x, px) unit(#y, px);
4 }
Here is the Less:
.bg (#x; #y) {
background-position: unit(#x, px) unit(#y, px);
}
.mydiv (#x:0; #y:-52; #width:300px; #height: 155px) {
.bg(#x, #y);
width: #width;
height: #height;
opacity: 1;
}
.mydiv()
also if I just use only multiple parameters it cause the same error:
SyntaxError: properties must be inside selector blocks, they cannot be in the
root. in less/style.less on line 14, column 3:
13 .mydiv(#width:300px; #height: 155px) {
14 background-position: 0px -52px;
15 width: #width;
Less:
.mydiv (#width:300px; #height: 155px) {
background-position: 0px -52px;
width: #width;
height: #height;
opacity: 1;
}
.mydiv()
I don't know what's wrong with it...please help...
quote: i'm using less with grunt-contrib-less, and less 1.4.2, in windows 8.1 x64.

Answer 1

You're calling .mydiv() outside the scope of CSS block, that would (hypothetically) would output incorrect CSS. something like:
/* some arbitrary css: */
body { font-family: Arial; }
a { text-decoration: underline; }
/* your mixin (invalid): */
background-position: 0px -52px;
width: #width;
height: #height;
opacity: 1;
You have to wrap the mixin call within a CSS block, something like:
.bg (#x; #y) {
background-position: unit(#x, px) unit(#y, px);
}
.mydiv (#x:0; #y:-52; #width:300px; #height: 155px) {
.bg(#x, #y);
width: #width;
height: #height;
opacity: 1;
}
.myClassThatUsesMyDiv
{
.mydiv()
/* can be with some other directives: */
background-color: transparent;
}

Answer 2

Using mixin containing attributes outside any other elements will result in incorrect CSS, and the error you've come across is because LESS compiler wants to prevent that.
Q: So how do I use my mixin?
A: Make sure you understand what is a mixin definition, and what is a mixin call.
I'll use simplified examples to clearly explain this.
This is mixin definition:
.sample-mixin (#color; #width: 100px) {
color: #color;
display: block;
width: #width;
}
To use such a mixin, you just call it like a function:
.sample-mixin(#eeffee); // this line is actual mixin call
Mixin call is evaluated to whole mixin content (with variables evaluated):
color: #eeffee;
display: block;
width: 100px;
Q: When calling mixins outside other block is incorrect?
A: If your mixins contains at least one attribute:
.sample-mixin (#color) {
color: #color;
}
Then calling it outside block:
.sample-mixin(#eeffee);
Results in incorrect CSS:
color: #eeffee;
But calling it inside block:
p {
.sample-mixin(#eeffee);
}
Is allright, as it results in correct CSS:
p {
color: #eeffee;
}
Q: When calling mixins outside other block is correct?
A: Only if your mixins contains nothing but blocks:
.sample-mixin (#color) {
body {
color: #color;
}
}
Then calling it outside block:
.sample-mixin(#eeffee);
Results in correct CSS:
body {
color: #eeffee;
}
Sidenote: having blocks inside mixins is not a good practice, as it can effectively confuse readers and results in higher coupling inside your CSS.