Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


@import confusion


My head is spinning over this @import thing. I don't really understand what it does. Can someone explain it to me in dummy terms?

3 Answers

Máté Végh
Máté Végh
25,607 Points

It's like a dream within a dream in the Inception movie. With @import you can import a CSS file into another CSS file, which you can import into a third CSS and so on. It's very powerful if you are using a CSS preprocessor like Sass, but you should avoid using it within pure CSS, because it makes your page load slower. Instead, it's best if you link your fonts and stylesheets inside your HTML pages. Feel free to ask if you have further questions!

Okay, let me see if I understand this. Let's say that I have three separate CSS files. The first one is targeting the body and changing the color to red, the second is targeting the paragraphs and changing the color to blue, and the final one is changing the header background to pink, then I can link one CSS file into my page (<link rel="stylesheet" href="badcolorscheme.css">) and using @import in that main style sheet I can essentially merge all of those into one. Is that right? Sorry if that is way off base.

Máté Végh
Máté Végh
25,607 Points

That's totally correct! But as I said, you should avoid using it. Here is a good explanation to understand why: http://stackoverflow.com/a/10037064

Woo! Thanks! :)