Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

BJ Scott
BJ Scott
3,452 Points

Sass file structure when a lot of the design are different

So I have been through lots of tutorials because I want to begin using Sass but I am having trouble figuring out how it would fit into my current workflow with the projects I am doing. I totally understand it's use for building applications. It sounds like an awesome solution but what about for other types of projects. I work on the Marketing side where I design and build out case studies for different brands we work with. And although the structure is fairly consistent as far as the sections I include in each one, the design is VERY different. Some case studies have videos and parrallax scrolling and others have gifs and animations with some extra structure pieces included depending on the brand.

I guess my question is how would I incorporate brand specific styles in the folder structure since they will be different for each case study? We currently have a folder set up of Base, Layout, Modules, Sections, and Utils. Would I make brand specific styles in a (ex. toyota.scss) file and drop it in the sections folder? I'm kind've lost on this piece. Or am I thinking of this all wrong?

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,705 Points

Hmmm it's a good question.

I think it's helpful if you take what the instructors say to heart and that is so long as you follow the guidelines they set you can basically choose your own workflow. So you could have your Base, Sections, Modules etc but then have another section for brand.

Also you can call your import styles in any order and structure your output styles with comments so you could have general styles at the top and then your more specific at the bottom. If you're working with a team, these are the sorts of decisions you'll make between yourselves :-)

BJ Scott
BJ Scott
3,452 Points

That's what I thought I should do but wouldn't that defeat the purpose of using sass because in theory its just like making a css file per brand still?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,705 Points

Not really because no matter how big the file is you're still reducing HTTP requests by using only the one CSS file. Remember you wouldn't put your SCSS files on the server. They're there purely for production. So you build up the output CSS using your partial files.

Of course, you're entirely free if you want to to use as many output CSS files as you want but I can see the benefits of doing it this way. You can then reduce the bandwidth even further by doing a minify on your CSS to remove any comments, spaces and empty lines of code.

BJ Scott
BJ Scott
3,452 Points

Great. Thanks Jonathan!