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

CSS CSS to Sass Installing Sass and Setting up the Project Up and Running with Sass

ROLDAN DINGLASA
PLUS
ROLDAN DINGLASA
Courses Plus Student 7,371 Points
Posted by ROLDAN DINGLASA
ROLDAN DINGLASA
Courses Plus Student 7,371 Points

main.css and style.css?

I have my own file/project, but in my css folder Im using normalize.css, main.css and interactions.css. which file/folder should be converted into .scss?

5 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hi Roldan,

You'll probably leave normalize.css alone, but you might want to rename it to _normalize.scss just so you can include it into a single CSS file.

Then your main.css and interactions.css files should probably become .scss files. Depending on what you're doing with interactions.css currently you might just want to include that as well (by first renaming it to _interactions.scss). So your main.scss might look like this...

@import 'normalize';
@import 'interactions';

// Followed by whatever is in your main.css currently.

body {
  ...
}

I find breaking up your files and then including them into a single .scss file helps keep things organized for you and reduces the files you're going to be sending to the user's browser. You might even consider breaking up your interactions file in another way, depending on what that is exactly.

ROLDAN DINGLASA
ROLDAN DINGLASA
Courses Plus Student 7,371 Points
ROLDAN DINGLASA
ROLDAN DINGLASA
Courses Plus Student 7,371 Points

Tim since I have 3 scss files now(main, normalize and interactions) how can i change my html files? i just followed the video to make an application.scss, then change the "main" to "application" like this.

<link href="css/normalize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">
<link href="css/application.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/interactions.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

help me, please..

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Roldan,

Remember from my answer that even though you have multiple SCSS files you're importing them into a single file. So if you're application.scss looks like this for example:

@import 'normalize`;
@import 'interactions';
@import 'responsive';
@import 'main';

That means that each of those files need to start with an underscore so they can behave like Sass Partials to just be included within you're application stylesheet when it compiles.

Then all you have to do in your HTML is just attach your single application.css that was compiled.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">
<link href="css/application.css" rel="stylesheet">

I hope that helps.

ROLDAN DINGLASA
PLUS
ROLDAN DINGLASA
Courses Plus Student 7,371 Points
ROLDAN DINGLASA
ROLDAN DINGLASA
Courses Plus Student 7,371 Points

Tim thank you! now my site is ok! I keep looking my code for more than 3 hours trying to solve problem.. haha I love you, bro, you're the best! =)

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hey man, no problem, I'm glad that worked for you!

ROLDAN DINGLASA
PLUS
ROLDAN DINGLASA
Courses Plus Student 7,371 Points
ROLDAN DINGLASA
ROLDAN DINGLASA
Courses Plus Student 7,371 Points

Hi Tim! how are you, i already finished Sassing my css file, my question is which folder or file should be uploaded for website. i have 4 htmls, scss folder containing ( _interactions, _main.scss, _normalize, responsive and application.scss), image folder, css folder and sass.cache.

thank you!

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hi Roldan,

In reality none of those files need to be uploaded on the site. You just need to upload your compiled CSS file which shoudl be application.css in this case.

ROLDAN DINGLASA
PLUS
ROLDAN DINGLASA
Courses Plus Student 7,371 Points
ROLDAN DINGLASA
ROLDAN DINGLASA
Courses Plus Student 7,371 Points

you mean, I need to upload the application.css file, image folder and 4 htmls, right?

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Correct. I was referring to the fact that you don't need to upload your SCSS files. They all compile to your CSS file. So yes, everything else would need to be uploaded. Images, HTML, CSS, and any JavaScript you might have.