less mixins do not work - less

Question

I have recently decided to use LESS.
So I am doing the migration from css to less.
There is definitively something I do not understand about mixins.
I read the doc, of course, and read some stuffs about mixins. I have done some research on StackOverflow, and I did not find any anwser.
I have this less code:
navbar{
position: relative;
display: block;
height: 100%;
margin-bottom: 2px;
.mixin-subtitle{
display: block;
background: #white;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
.mixin-type{
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156,178,189,0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #blue;
}
.artist{
subtitle{
.mixin-subtitle();
}
.type{
.mixin-type();
&:before{
content: "\e607";
}
}
}
.album{
subtitle{
.mixin-subtitle();
}
.type{
.mixin-type();
&:before{
content: "\e608";
}
}
}
.song{
subtitle{
.mixin-subtitle();
}
.type{
.mixin-type();
&:before{
content: "\e614";
}
}
}
}
And the mixins do not work. I have tried to put the mixins in the beginning of my file. I have tried to put () after my mixins declarations.
And it still does not work...
For now I am compiling less on live with less.js, I have tried to compile it by myself with lessc, it still does not work.
I can not understand why.
Can someone help me ?
Edit:
there is something I do not understand.
If I put subtitle or .type as brother's of my mixins, it works.
But if I put it under artist, or song, or album, it does not...
So in this code, mixins are called :
navbar {
...
.mixin-type{
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156,178,189,0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #blue;
}
.type{
.mixin-type();
&:before{
content: "\e607";
}
}
}
There is definitively something I do not understand with mixins ...
EDIT2
expected css :
.artist subtitle, .album subtitle, .song subtitle{
display: block;
background: #fff;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
.artist .type, .album .type, .song .type{
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156,178,189,0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px 0000ff;
}
.artist .type:before{
content: "\e607";
}
.album .type:before{
content: "\e608";
}
.song .type:before{
content: "\e614";
}

Answer 1

The Fix (I think)
Based on your edit of what you are expecting, it appears that you don't want to be doing mixins, but rather extends. In your output css you do not have noted the fact that your original code nests everything inside a navbar "element". Assuming that nesting is still the case, then what you really want is probably something like this:
LESS
navbar{
position: relative;
display: block;
height: 100%;
margin-bottom: 2px;
.mixin-subtitle {
display: block;
background: #fff;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
.mixin-type {
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156,178,189,0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #00f;
}
.artist{
subtitle {
&:extend(navbar .mixin-subtitle);
}
.type{
&:extend(navbar .mixin-type);
&:before{
content: "\e607";
}
}
}
.album{
subtitle {
&:extend(navbar .mixin-subtitle);
}
.type{
&:extend(navbar .mixin-type);
&:before{
content: "\e608";
}
}
}
.song{
subtitle {
&:extend(navbar .mixin-subtitle);
}
.type{
&:extend(navbar .mixin-type);
&:before{
content: "\e614";
}
}
}
}
CSS OUTPUT
navbar {
position: relative;
display: block;
height: 100%;
margin-bottom: 2px;
}
navbar .mixin-subtitle,
navbar .artist subtitle,
navbar .album subtitle,
navbar .song subtitle {
display: block;
background: #fff;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
navbar .mixin-type,
navbar .artist .type,
navbar .album .type,
navbar .song .type {
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156, 178, 189, 0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #00f;
}
navbar .artist .type:before {
content: "\e607";
}
navbar .album .type:before {
content: "\e608";
}
navbar .song .type:before {
content: "\e614";
}
If you in fact do not want navbar in the selector string, then you need to remove all that code from being nested inside navbar.
Understanding Mixins
Mixins just "copy" code to the location you specify (no grouping occurs). Your original code was doing just that when I ran it, all the properties were copying into the navbar .artist subtitle, navbar .album subtitle, etc. under their own selector blocks. The above code uses the :extend() to not copy code, but group the code together.
Improving the Above Code
You can actually eliminate the extra .mixin-subtitle and .mixin-type classes and do your extends this way (defining it all under one of the groups, here I did .artist):
LESS
navbar{
position: relative;
display: block;
height: 100%;
margin-bottom: 2px;
.artist {
subtitle {
display: block;
background: #fff;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
.type {
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156,178,189,0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #00f;
&:before{
content: "\e607";
}
}
}
.album{
subtitle {
&:extend(navbar .artist subtitle);
}
.type{
&:extend(navbar .artist .type);
&:before{
content: "\e608";
}
}
}
.song{
subtitle {
&:extend(navbar .artist subtitle);
}
.type{
&:extend(navbar .artist .type);
&:before{
content: "\e614";
}
}
}
}
Output CSS (Cleaner)
navbar {
position: relative;
display: block;
height: 100%;
margin-bottom: 2px;
}
navbar .artist subtitle,
navbar .album subtitle,
navbar .song subtitle {
display: block;
background: #fff;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
navbar .artist .type,
navbar .album .type,
navbar .song .type {
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156, 178, 189, 0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #00f;
}
navbar .artist .type:before {
content: "\e607";
}
navbar .album .type:before {
content: "\e608";
}
navbar .song .type:before {
content: "\e614";
}
You can see that the above code does not output then output the (I am assuming) unused .mixin-subtitle and .mixin-type classes, but just simply the classes you are using.