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
BJ Scott
3,452 PointsSass 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
Treehouse Moderator 91,252 PointsHmmm 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
3,452 PointsBJ Scott
3,452 PointsThat'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
Treehouse Moderator 91,252 PointsJonathan Grieve
Treehouse Moderator 91,252 PointsNot 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
3,452 PointsBJ Scott
3,452 PointsGreat. Thanks Jonathan!
Jonathan Grieve
Treehouse Moderator 91,252 PointsJonathan Grieve
Treehouse Moderator 91,252 PointsYou're welcome. :)