Non-rendered import

[Xowap]

Here is a feature that would be useful to me: be able to import some stuff but without having it rendered in the final CSS.

What I want to achieve by that is to create a CSS file that will use Bootstrap as a base library, and will extend it. This will allow me to use classes as mixins (like "row") for another new class that will not be named like that and that will be slightly different.

Currently, I import bootstrap at the start of my file and I am able to do so, however it'd be easier to just generate the bootstrap CSS and then a separate CSS file for each part of my application, instead of generating bootstrap+custom CSS for each part of my application. If you see what I mean...

Thanks :)

[jonschlinkert]

This feature was introduced in the 1.4.1 branch https://github.com/cloudhead/less.js/tree/1.4.1-wip, it's called reference (an "import directive"). it works like this:

@import (reference) "bootstrap.less";

Then in your styles you can reference any bootstrap styles using mixins or extend, and only styles you reference will show up in the output CSS.

And I have to say it's seriously brilliant, solid work by @lukeapage. I really think this is one of the coolest features we have and it's impressive how well this feature was implemented.

[jonschlinkert]

btw, in case this helps, here is just one example of how I'm using this feature.

@import (reference) "bootstrap.less";
@import (reference) "reference.less"; // custom lib, created specifically for this purpose

// Navbar
// --------------------------
.global-nav {
  // Extend and override bootstrap styles
  &:extend(.navbar, .navbar-inverse, .navbar-fixed-top all );
  &.hidden:extend(.navbar.hidden) {}
  &.visible:extend(.navbar.visible) {}

  &:hover {
    background: lighten(@brand-primary, 5%);
  }
  .navbar-brand {
    padding-left: 20px; 
  }
  .navbar-nav > .active > a {
    &, &:hover, &:focus {
      background-color: darken(@brand-primary, 5%);      
    }
  }
}

Now, I don't need to use .navbar navbar-inverse navbar-fixed-top in my markup. Just global-nav. Very exciting indeed.

Notice that the .navbar class is extended specifically, but the .navbar-fixed-top class is extended "broadly" using the keyword all, which means that all nested styles of that class will be extended as well. I then extend two custom classes .navbar.hidden and .navbar.visible, which are both referenced through the reference.less lib mentioned above.

Hope this helps.

[Xowap]

Aaaaah wonderful, that's exactly what I wanted :)

Well I'm sorry for the useless request then, I haven't been able to find the feature anywhere. Great work guys!

[jonschlinkert]

No worries. It's in a wip branch, so it won't be documented until it's officially released.

[tomgillett]

This doesn't seem to have made it into the 1.4.1 release. Does anyone know what happened to it?

[lukeapage]

Its finished in the 1.5.0-wip branch which I want to release soon, would just really like source maps finished first.

[lukeapage]

1.4.1 was just critical bug fixes

[ruslanurban]

The feature appears to be undocumented on http://lesscss.org/#-importing