How do mixins actually work in LESS?

K

KG2016-05-08 13:52:25

css

KG, 2016-05-08 13:52:25

Hello, I have been using LESS for a very long time, albeit not fully, but still.
Now faced such problem. There is a code:

.questions {
    &__btn {
    color:red;
    }
}

Now I want to make a mixin for the button of another block:

.another-questions {
    &__btn {
    .questions__btn;
    }
}

But nothing works, I collect it at a gallop and it writes .questions__btn is not defined. In the code, of course, .another-questions comes after .questions.
Where is the joint? Or is LESS stupidly unable to mix when styles for a block are defined through nesting?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexey A, 2016-05-08
@allewa

before compilation

.questions {
    &__btn {
    color:red;
    }
    &__btn2 {
    color:green;
    }
}

.another-questions {
    &__btn {
    .questions;
    }
}

after compilation

.questions__btn {
  color: red;
}
.questions__btn2 {
  color: green;
}
.another-questions__btn__btn {
  color: red;
}
.another-questions__btn__btn2 {
  color: green;
}

Or:

before compilation

.questions {
    &__btn {
    color:red;
    }
    &__btn2 {
    color:green;
    }
}

.another-questions {
    .questions;
}

after compilation

.questions__btn {
  color: red;
}
.questions__btn2 {
  color: green;
}
.another-questions__btn {
  color: red;
}
.another-questions__btn2 {
  color: green;
}

What should be the output?