CSS

James Barnett
James Barnett
39,195 Points

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

This is a simple example of how to use Sass with Workspaces, this tutorial includes 3 parts.

  1. Setting up our Workspace and using some basic HTML structure taken from the Sass Basics course.
  2. Testing out Sass with the watch feature and some Sass code also taken from the Sass Basics course.
  3. Starting with opening our Workspace, running the Sass' watch feature, making a simple change, watching the styling change in our HTML file

Part 1 - Getting Ready

  1. Go to Installing and Using Sass and download the project files
  2. Extract the final directory from the project files zip you downloaded in the previous step
  3. Go to Workspaces and create a new sass workspace
  4. Open the final directory you extracted in earlier and drag the index.html file into your new Sass Workspace
  5. Preview the index.htmlfile you added to your Workspace in the previous step

Part 2 - Sass Magic

  1. In your Console in your Workspace type sass --watch .
  2. Open the final directory you extracted and drag the main.scss file into your workspace
  3. Preview the index.html file to see styling changes
  4. Close your Workspace

Part 3 - Making Changes

  1. Open your Sass Workspace as you would when you are starting a new learning session
  2. In your Console in your Workspace type sass --watch .
  3. Open the main.scss file in your Worksapce
  4. Change the color of links
  5. Save the main.scss file
  6. Preview the index.html file to see styling changes

I cannot find the files referred to in step 4.

9 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

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

Richard Nash
Richard Nash
24,862 Points

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/

Patrick Koch
Patrick Koch
34,236 Points

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

Richard Nash
Richard Nash
24,862 Points

Thanks for the shout-out Patrick Koch, but it was all Guil Hernandez and James Barnett, i just asked the questions :-)

Cheers,

R

Patrick Koch
Patrick Koch
34,236 Points

yep, praise Guil and James, but I had the same props as you, ... so I got in the enjoyment of your questioning!

so thank you too,

g patrick

Richard Nash
Richard Nash
24,862 Points

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

James Barnett
James Barnett
39,195 Points

Do I run the sass --watch command

If all of you your scss files are in the same directory, run sass --watch . the . at the end tells the terminal to look in the current directory, you can also specify any other directory.

Richard Nash
Richard Nash
24,862 Points

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...

Richard Nash
Richard Nash
24,862 Points

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

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

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. :)

Richard Nash
Richard Nash
24,862 Points

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