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.

CSS

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,364 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.

Example:

.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>