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 Sass Basics (retired) Getting Started with Sass Advanced Nesting

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points
Posted by Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

Re: Sass-Where do I put the main.css file?

I am studying Sass. My command line indicates that sass is watching css. However, when I code into my scss file, it doesn't output into the main. css file. All files i.e. index.html; main.scss and main.css are in one folder called sass 1.

Should I have the main.css file in a separate folder?

Jane

1 Answer

mikes02
mikes02
Courses Plus Student 16,968 Points

Are you using Compass to compile? Typically what I would do when creating a Compass project is define my SASS directory and then my output CSS directory, so the files are stored in separate directories, so you might use something like:

compass create project-name --bare --sass-dir "sass" --css-dir "css"

Where "project-name" would be replaced by the actual name of your project, the "sass" directory would store a SASS file, like main.scss for example, and then "css" directory would contain the compiled CSS file, for example main.css

It's pretty typical to keep your .scss and compiled .css files in separate directories.

If you're not using Compass are you just using something along the lines of:

sass --watch input.scss:output.css

Jaime Rios
Jaime Rios
Courses Plus Student 21,100 Points
Jaime Rios
Jaime Rios
Courses Plus Student 21,100 Points

So in my main.html I should link to the .css file, right?

mikes02
mikes02
Courses Plus Student 16,968 Points

Right Jaime, in any pages that utilize the compiled CSS file you would link to it, for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Awesome Website</title>
    <link rel="stylesheet" href="css/main.css">
</head>

Of course main.css would change to whatever your compiled stylesheet was titled, this also assumes you are saving it in a directory called css.