Webmasters Gallery

You know how you can extend things in CSS preprocessors? (If not, you can learn about it here.) Sass can do it. LESS can do it. Stylus can do it. While it’s a feature you want to be careful with (see here and here), I find it pretty useful sometimes.

At a recent CodePen Meetup in Chicago, I heard Sam Allan do a quick presentation on LESS’ ability to do (reference) imports, which I had never seen before.

They look like this:

/* Normal import */
@import "colors-or-whatever.less";

/* Reference import */
@import (reference) "less-for-reference.less";

A normal import will grab the contents of that file and dump it into the file asking for it. Super useful. Concatenating files is a vitally important feature of preprocessors. A (reference) import doesn’t do that. In fact, it doesn’t put anything at all into the file asking for it. The code in that file is just now ready to use, either by calling a mixin within it or extending a selector within it.

That’s a pretty powerful concept. It means you could import an entire library but just use the bits and pieces you want.

Have you ever wanted to use a CSS framework or library but thought it was too much?

As in, a bunch of code that you don’t think you’ll ever use. Including the whole library seems like overkill, not to mention not ideal for performance. You could pick it apart yourself, but then that kinda wrecks the upgrade path.

With (reference) imports you can import whatever you want and then just extend the bits you want out of it. It might be weird, but you could import a bunch of libraries and just pick and choose parts, getting just the output you need.

Example

Say you really dig Pure CSS. Mattia Migliorini has a port of it in LESS. It’s full of good stuff, but it’s 33 KB and maybe you don’t need all of it.

Within it, there is a .pure-button class, Pure CSS’s take on the button. If you wanted to use it, you could do this:

@import (reference) "https://s3-us-west-2.amazonaws.com/s.cdpn.io/18728/pure.less";

.my-button {
  &:extend(.pure-button all);
}

And hey look, I can call my version whatever I want. And, if and when the library updates, I just update it. Assuming names didn’t change, I get the changes.

(The all keyword you see above means “extend all it’s nested stuff too” and that’s totally optional, which is another kinda awesome thing LESS extends can do.)

Here’s that demo:

See the Pen GpjzOj by Chris Coyier (@chriscoyier) on CodePen.

More

Again, credit to Sam Allan for showing this to me. He has more demos on the subject. Some of them he calls “Semantic Remapping” because he uses selectors he feels are more semantically appropriate than what the original library used.

See the Pen Semantic Remapping — Framework Centipede example by dehuszar (@dehuszar) on CodePen.

Reference Imports in LESS (are kinda cool) is a post from CSS-Tricks