Structuring SCSS files/Partials

Question

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?

Answer 1 · 2019-03-05T05:00:25Z

March 5, 2019 5:00am

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>

Welcome to the Treehouse Community

Looking to learn something new?

Matthew Francis

Matthew Francis

Structuring SCSS files/Partials

1 Answer

Steven Ventimiglia

Steven Ventimiglia