So in SASS does it mean that I need 2 of the same files in the same location.. Example test.css and test.scss ?

I am new to Terminal and SASS so I'm not fully understanding here so I'm going to follow up with some questions:

1. when you use the underscore then name of file like _color.scss do you mean in the command line or naming the file with an underscore?

2. So if you use the underscore method of naming files that file automatically becomes a partial of the main style sheet (the style sheet with no underscore) therefore if you compile that main style sheet for example style.scss it will make a style.css file with ALL of the partial file styles included in that one compiled main style sheet.. am I correct?

3. To sum up what I took from your answer you would only need one main .scss file and the rest will be partials scss files that include the style when compiled into one .css file... correct?

Questions answered below:

1) I mean in the filename itself; the underscore has nothing to do with the command line there. The only thing any of this would have to do with the command line is a) installing the SASS gem on your machine, and b) using the sass --watch command if you wanted to go that route (though there are alternatives if you want to steer clear of the command line, as mentioned in my initial answer)

2) No, those files do not automatically get pulled into your main .scss file, you need to put references to them in that file, as stated. Naming files with an underscore simply declares them as a partial, which tells your Sass compiler to ignore them. In the file that you DO want your Sass compiler to build (say, style.scss), you would reference the partial files via the import call, like this:

/* import your partials here */

@import '_color.scss';
@import '_components.scss';
@import '_responsive.scss';

Importing the partials in this manner will make their code pull into this style.scss file when the compiler runs it.

3) Yes, you only need one main .scss file for your compiler to build and turn into a .css file. In that .scss file you want to call the appropriate partials necessary to output all of your styles, and then you're good to go!

Erik

ahh I see now ok makes perfect sense thanks a lot Erik!

Why would you watch separate files or 2 folders when you can just import all the partial files into one main .scss file and watch that one file?

Lucas,

He may have more to comment on, but initially, it seems Jonathan is reiterating that you do NOT watch the individual partial files.

Additionally, in the --watch command that he showed you, he's demonstrating that you can tell the compiler to watch the folder on the left of the colon, and compile TO the folder on the right side of the colon. So this tells Sass to watch your "scss" folder for any changes made to any full .scss file (i.e. not a partial), and when there are changes made/saved, to compile them into a .css file and deposit that .css file into your "css" folder.

You could also write the --watch command to watch a specific file and output to a specific file, as follows:

sass --watch input.scss:output.css

That would watch for any changes made/saved to your "input.scss" file and it would compile it and write all those changes to "output.css".

Erik

so you mean instead of

sass --watch .

I would use

sass --watch scss:css

which instead of watching the main folder it watches for a folder within the main folder?

You could name the folders anything you like. the scss:css in the watch command I recommended are examples of folder names you could use.

The first step is to use the terminal to move the directory you want which would be the root directory of your project.

Secondly you could type in a command

sass --watch sassfolder:cssfolder

Even if those folders didn't exist in your directory, Sass would create them. You'd need to then store an scss file or 2 with at lest one partial.

But let's also say you have a sass file in your project already. For the sake of this post lets say we used the above folder names. To out CSS in the CSS folder you'd write

sass --watch sassfolder/style.scss:cssfolder/style.css

This sends CSS output to a specific file in the cssfolder directory.

Hope that's clear. You use Sass commands to organise your project. :-)

Ahh ok I see ok but just one part about your comment through me off. When you said:

You'd need to then store an scss file or 2 with at lest one partial.

so your telling me that there is a requirement of how many partials you need? or how many you need to create a folder?

Hi there,

There's no requirements for number of partials needed but you will of course need one scss file that isn't a partial (only one) so Sass knows which file to compile CSS output.

sass --watch scss:css

The command will only create a folder if it doesn't exist in that location. With only one compilable and many partials Sass will find the none partial file and use that file to output CSS.

But of course you can override this by explicitly specifying a filename to output CSS with by using...

sass --watch sassfolder/style.scss:cssfolder/style.css

I see now thank's a ton Jonathan, really appreciate the help!

No problem :)

I'm really glad i could help