How do I use a mixin created in another file?

Question

How do I use a mixin created in another file?

Navigation

#1 by (2 votes)

1

I have a question about using mixin of less in different style sheets.

I have 2 initial stylesheets: reset.less and styleguide.less

I would like to know how I can in styleguide.less set a mixin title .

And in reset.less just use it.

Example:

styleguide.less

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

reset.less

.h1 {
  .title();
}

less

asked by anonymous 05.03.2015 / 16:27

1 answer

iptables - package marking with redirect to squid How to manipulate the DOM through an extension?

score 2 · Accepted Answer

You need to reference the file where that mixin is, by doing @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, keeping each .less a specific function. The only file from which the CSS will be generated is the one in the build directory. An example, of separating using the above structure:

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

This file is not aware of any .less .
functions.less has access to the variables file to use in the 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 build file. This can ignore the variable file access only to the functions 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 stylesheet:

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

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