Using Sass with Workspaces (a step-by-step guide)

Thank you for this guide, James Barnett! I just added the link to this post in the course teacher notes.

Yes, thank you James :-) I will go through everything here and see how it works for me :-)

Also found a great article by Hugo about Sass project architecture that might be of assistance to some newcomers as well :-)

http://www.sitepoint.com/architecture-sass-project/

Thanks a lot Guil, James and Richard ^^, for guidance, everything worked out just fine.

ok, so i'm doing this from scratch and not using the "Installing and using Sass" project.

So here is where I am...

1. Created a new Sass workspace.
2. Set up my project using the SMACSS methodology.
3. Created an index.html file with my site on it.
4. Took my old CSS and broke it into small partials representing the different elements of my site
5. Organized those into folders with manifest files using the @import command to import the partials
6. created an app.scss file and @imported all of the manifest partials into the app.scss file...

Now what do I do to get the app.css and app.css.map files that I need?

Do I run the sass --watch command? Anything else? Do I make the app.css file first?

This is where I am stuck James and Guil. Not sure exactly what to do next to actually see my scss be turned into css and be applied to my html.

Thank you for your time and help,

Richard Nash Los Angeles, CA

ok, i put sass --watch in the console and it did this:

treehouse:~/workspace$ sass --watch
What files should I watch? Did you mean something like:
sass --watch input.sass:output.css
sass --watch input-dir:output-dir
Use --trace for backtrace.

So then I put in this:

sass --watch input.app.scss:output.app.css

because I want my app.scss file to make and update my app.css file, and i got this:

treehouse:~/workspace$ sass --watch input.app.scss:output.app.css

Sass is watching for changes. Press Ctrl-C to stop.
error No such file or directory @ rb_sysopen - input.app.scss

so i'm not sure what to do next...

ok, i figured it out! XD the specific info i was looking for was in the partials video in the first badge of advanced sass, which was this:

sass --watch scss:css

that is what I was looking for to have all my partials be imported into my app.scss file and then have my app.css file be automatically generated by the console, of whatever magical awesomeness is going on behind the scenes and under the hood :-)

Thank you for your help James Barnett :-)

R

Hey Richard Nash,

Yep, that's the --watch command I usually use. In the Modular CSS with Sass course, I make sure to remind you to use and type the --watch command in the console (almost) every other video. See 1:19 in this video, for example. :)

Hi Guil Hernandez,

Thank you for your reply. I think the part that I was not understanding is that the command:

sass --watch scss:css

creates the initial css file as well. I think I made the assumption that this command only added info to the already created app.css file and I assumed there was a separate, longer command that would be needed to create the initial app.css file.

I'm always happy when the way to do something is actually easier than I expected :-)

Thanks for all your hard work :-)

Richard

:-)