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


Matthew Francis
Matthew Francis
6,967 Points

Structuring SCSS files/Partials

Newbie question about sass!

I have this structure for my scss files: https://github.com/HugoGiraudel/sass-boilerplate/tree/master/stylesheets

My question is: I want to add another page. When a user clicks a button or something, it will lead to that page. How do I do that? Do I import the new page to main.scss and somehow get rid of my old page?

1 Answer

Steven Ventimiglia
Steven Ventimiglia
27,371 Points

I recommend using your index.html as a template by saving it with a different name (like main.html), then removing everything within the <body>...</body> tag set. Linking style.css to your index.html, before using it as a template, will then let you apply those styles to any page cloned from the template.

Also, I can tell that you're probably trying not to load styles that don't need to be used, but...

The real trick is to learn how to keep your CSS (and code in general) as DRY as possible. It stands for "Don't Repeat Yourself", and you'll often find that repeating certain properties and values can be DRYed quite a bit when reviewing your work done with Sass, once compiled. The starting point for this is to get that CSS to reuse those properties and values as much as possible.

Many times, you'll add classes and IDs that are really trying to be the focus of attention for different pages/views; however, the challenge is to, "gather all the children after playtime is over and make sure they aren't trying to hog the juice when they should be sharing." ;)

By doing this, you can create - for instance - boxes that have different colored borders by creating a .box class, then nesting color names within it so they don't take much more space, don't repeat the code several times, and can be used for other elements in your theme.


.box {
    // default
    width: 100px;
    height: 100px;
    border: 1px solid rgba(0,0,0,0.25); /* this border will create darker colors at 0.25 opacity */
    background: #ddd;
    // colors
    &_blue {background: blue;}
    &_green {background: green;}
    &_purple {background: purple;}
<div class="box_blue">...</div>
<div class="box_green">...</div>
<div class="box_purple">...</div>