How do I use a mixin created in another file?

Question

I have a question about using mixin Less on different style sheets.

I have 2 sheets of initial styles: reset.Less and styleguide.Less

I wonder how I can in styleguide.Less define a mixin title.

And in reset.Less just use it.

Example:

styleguide.Less

.title() {
  text-decoration: underline;
}

reset.Less

.h1 {
  .title();
}

Answer 1

You need to reference the file where this is mixin, doing the @import.

/* mixin.less */
.title(){
    text-decoration: none
}

/* reset.less */
@import "mixin.less";

.title {
    .title();
}

---

One way to organize your files is to create a structure similar to this:

- less
|- build
|    |- mixin.less
| - variables.less
| - functions.less

... outros *.less

So you can keep the files separate by keeping in each . Less a specific function. The only file from which the CSS will be generated is the one in the directory build. An example, separation using the above structure:

/* variables.less */
@background-color: #fff;
@font-color: #333;

This file has no knowledge of any other .Less.
Already the functions.less has access to the variables file to use them in functions, for example:

@import "variables.less";

.transform(@arguments){
    -webkit-transform: @arguments;
        -ms-transform: @arguments;
            transform: @arguments;
}

.paint-div(){
    color: @font-color;
    background: @background-color
}

And finally the file of build. This can ignore the variable file access only to the function file:

@import "../functions.less"; /* subindo um nível pois ele está dentro do diretório 'build'*/

.main {
    .paint-div();
}

.main {
    & a {
        .transform(translateX(200px) rotate(6deg));
    }
}

When compiled, the style sheet:

.main {
  color: #333333;
  background: #ffffff;
}

.main a {
  -webkit-transform: translateX(200px) rotate(6deg);
      -ms-transform: translateX(200px) rotate(6deg);
          transform: translateX(200px) rotate(6deg);
}