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!

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

CSS CSS Basics (2014) Getting Started with CSS Importing Style Sheets with @import

I'm struggling to see the need for importing a stylesheet

I don't fully understand the need to import a stylesheet as opposed to linking a stylesheet in the head of a document. In the video they even stated that your performance will take a hit when you import because it requires more server requests.

Is this lesson just showcasing that you have the option in doing so, or is there a situation where it would be beneficial to import a css file in the head or the css file linked in the document head.

2 Answers

if you have a a lot of code you can import all that from one stylesheet to another, You’ll likely do this skit with SASS like let’s say you have a main.scss file that’s linked to output of your style.css in your head of html. Well you can use @import to import other scss files to the main.scss which will link to the output of your css in the head of HTML.

You can have different scss files for different things like menu, background, colors, etc variables. Useful when you have a lot of css in one file and it’s 500-1000 lines long.

Will your website take a performance hit though? Even if you're using sass?

No sass compiles to css when you start to learn it. If it does not much of one.