{"id":208663,"date":"2015-09-25T06:12:17","date_gmt":"2015-09-25T13:12:17","guid":{"rendered":"http:\/\/css-tricks.com\/?p=208663"},"modified":"2015-09-25T06:12:17","modified_gmt":"2015-09-25T13:12:17","slug":"reference-imports-in-less-are-kinda-cool","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/reference-imports-in-less-are-kinda-cool\/","title":{"rendered":"Reference Imports in LESS (are kinda cool)"},"content":{"rendered":"

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

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

<\/p>\n

They look like this:<\/p>\n

\/* Normal import *\/\r\n@import \"colors-or-whatever.less\";\r\n\r\n\/* Reference import *\/\r\n@import (reference) \"less-for-reference.less\";<\/code><\/pre>\n
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<\/em> 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.<\/p>\n
That’s a pretty powerful concept. It means you could import an entire library but just use the bits and pieces you want. <\/p>\n
Have you ever wanted to use a CSS framework or library but thought it was too much?<\/h3>\n
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.<\/p>\n
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.<\/p>\n
Example<\/h3>\n
Say you really dig Pure CSS<\/a>. Mattia Migliorini has a port of it in LESS<\/a>. It’s full of good stuff, but it’s 33 KB and maybe you don’t need all of it.<\/p>\n
Within it, there is a .pure-button<\/code> class, Pure CSS’s take on the button. If you wanted to use it, you could do this:<\/p>\n
@import (reference) \"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/18728\/pure.less\";\r\n\r\n.my-button {\r\n  &:extend(.pure-button all);\r\n}<\/code><\/pre>\n
And hey look, I can call my<\/em> version whatever I want. And, if and when the library updates, I just update it. Assuming names didn’t change, I get the changes.<\/p>\n
(The all<\/code> 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.)<\/p>\n
Here’s that demo:<\/p>\n
See the Pen GpjzOj<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
More<\/h3>\n
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. <\/p>\n
See the Pen Semantic Remapping — Framework Centipede example<\/a> by dehuszar (@dehuszar<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":332501,"url":"https:\/\/css-tricks.com\/dynamic-conditional-imports\/","url_meta":{"origin":208663,"position":0},"title":"Dynamic, Conditional Imports","date":"January 13, 2021","format":false,"excerpt":"With ES Modules, you can natively import other JavaScript. Like confetti, duh: import confetti from 'https:\/\/cdn.skypack.dev\/canvas-confetti'; confetti(); That import statement is just gonna run. There is a pattern to do it conditionally though. It's like this: (async () => { if (condition) { \/\/ await import(\"stuff.js\"); \/\/ Like confetti! Which\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/dynamic-conditional-imports.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":155839,"url":"https:\/\/css-tricks.com\/html-imports\/","url_meta":{"origin":208663,"position":1},"title":"HTML Imports","date":"November 12, 2013","format":false,"excerpt":"Essentially a way to import a block of dependancies (scripts and styles) into an HTML document. It doesn't actually just plop the content from the referenced file where you call it though, like an @import does in CSS or and include does in a server side language. HTML could very\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":320361,"url":"https:\/\/css-tricks.com\/setting-up-and-customizing-the-ant-design-system-in-a-nuxt-app\/","url_meta":{"origin":208663,"position":2},"title":"Setting up and Customizing the Ant Design System in a Nuxt App","date":"September 9, 2020","format":false,"excerpt":"I don\u2019t typically work with UI libraries because they can be cumbersome and hard to override, which can contribute to a bloated. However, Ant Design has recently gained some some of my affection because it's easy to use, has extensible defaults, and features a delicate design. Nuxt and Ant Design\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/ant-design-vue.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320479,"url":"https:\/\/css-tricks.com\/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js\/","url_meta":{"origin":208663,"position":3},"title":"Import Non-ESM libraries in ES Modules, with Client-Side Vanilla JS","date":"September 7, 2020","format":false,"excerpt":"We're living through a weird era where there are tons of JavaScript libraries that were meant to be used as