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

CSS

Posted by Matthew Forsythe
Matthew Forsythe
1,416 Points

Question re: @import

Can you give a real-world example of when you would use @import when building a website? I know it imports a stylesheet into a stylesheet, but just having a tough time conceptualizing how this works in the real world.

Ryan Groom
Ryan Groom
18,674 Points

Matthew Forsythe It depends on the company or your style of programming. You may want to separate stylesheets for different pages or different components. For example, let's say you have a "Contact" page with a form and you know the form is going to require a lot of code for its styles. You may want to create a separate FormStyles.css file so that you don't have one massive file that you have to search through until you can find the form styles. This just makes it easier to manage and locate the styles you want to work on. Another reason this is useful is because imagine you have different CSS files for each page of your website. Let's say your homepage does not have a form on it, it would be unnecessary to load in extra code for a form that doesn't exist on this page. So if you had a Home.css and a Contact.css you would only want to import the FormStyles.css into the Contact.css file. I hope this helps! Le me know if you have any questions.

1 Answer

Blueocto Ltd
Blueocto Ltd
3,398 Points
Blueocto Ltd
Blueocto Ltd
3,398 Points

We use it everyday when developing with Sass. For example, each component or module would be styled, then imported into the main stylesheet;

// Global
@import "global/extends";
@import "global/variables";