css - Confusion surrounding @import behaviour in LESS, using Codekit

Question

Currently using Bootstrap, compiling with Codekit, and also have a separate style.less that I'm working on.

In variables.less:

@blue: #0096EF;

In style.less, I have the following:

.title-text {color: @blue;}
@import: "variables.less";

In bootstrap.less:

@import: "style.less";
@import: "variables.less";

Am I doing this right? To my mind, when bootstrap is compiled it results in variables.less occurring twice.

Answer 1

you should be able to go with import of variables.less once in bootstrap as first import instance, and do not include it second time in actual style.less. Because you are right on your assumption, it will import variable.less again. meaning you are importing same variables in two locations.

P.S. as long as variables.less that defines variables that you will be using is imported before you access variables themselves you will be fine.

@color-black: #000;

.color {
      color: @color-black;
}

Answer 2

I discovered this is also a Codekit issue too, as I am using Codekit to compile the less files.

Solution:

1. Create style.less and edit it as intended, reference @blue variable (not declared in current document)
2. On save, Codekit returns a compile error, due to un-declared variable in style.less. Ignore the error.
3. In bootstrap.less @import style.less
4. Save bootstrap.less, it compiles without issue
5. Call bootstrap.css in the html doc

Incidentally, I encountered a Codekit bug between step 2 and 3. After step 2, Codekit no longer watches or compiles anything. To solve, I needed to remove the watched project and then re-add it to Codekit.