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

Posted by Matthew McLennan
Matthew McLennan
10,315 Points

How do I add code to an existing Sass project so it adds to the end of the css file?

I am updating a site that has Sass. I understand watching a file but when I type the "sass --watch main.scss:main.css" it overwrites everything and starts it from scratch. How do I use an existing Sass file so it adds to the existing css file.

1 Answer

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Is main.scss the only file in the Sass folder? Usually Sass files are broken up into different folders and you just have to type sass --watch scss:css in the directory's main folder. Sass compiles CSS in the order listed in the main index file, so if you wanted to append new CSS to the end of it, you can create a new scss file in the Sass folder and then add the name of that file to the main index.scss file and it should add the CSS from your newest file last.

Matthew McLennan
Matthew McLennan
10,315 Points

Thank you for your response. There are several files in there. Just to confirm can I do something like this:

  1. Type "sass --watch update.scss:update.css" when Im in the scss folder.
  2. Then add something like "@import "new/update";" to my main.scss folder.

Then it will parse all together? Is it bad practice to just open the main.scss file and main.css file and just type the css in both?

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Yep, you can definitely add @import new/update to your main SCSS file (the one with all the @import calls), as long as you have a folder in your Sass folder with the name new and the _update.scss partial inside there.

To compile ALL of your CSS, including your new partial, you'll want to --watch the entire directory, though. I'm not sure how your directory is structured, but for me, I navigate to the root of the project folder (where my index.php file is) and simply use sass --watch scss:css (with no particular partial indicated) and it will compile all of my partials into one final CSS file.

Matthew McLennan
Matthew McLennan
10,315 Points

If Im just adding one or two lines of CSS is it bad practice to just open the main.scss file and main.css file and just type the css in both?

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

It's best to keep your Sass partials organized, with code going into its respective files (e.g.: layout styles going in a _layout.scss partial). Adding code to the outputted main.css file would probably be a bad idea, though, since if anyone in the future works with the project's Sass files, it will be overwritten. If your main.scss file is the one that includes all the @import calls, I wouldn't recommend adding any SCSS there, either. If you're really unsure, you could just add your code to one of the existing partials (probably the one listed last in the main.scss file), and then recompile the CSS file with Sass.

Matthew McLennan
Matthew McLennan
10,315 Points

May I ask if you are aware of any resources that lists out the steps to add css tweaks to an existing project? Im just contributor and don't want to kill anything.

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

I learned Sass from here on Treehouse, and there's a bunch of really great videos describing how Sass works. The Sass Basics course is really good and is what got me on-board with Sass in the first place. It's also taught by the creator of Sass.

If you're working with other people on the Sass part of the project, it might be a good idea to take that course to at least understand how Sass works, and also perhaps let others you're working with know that you're new to using Sass. That way, they might be able to give you some advice regarding how the project is set up, since how you modify files and use the --watch command will vary depending on the project's structure.

Another great resource is the Sass homepage, which has a "Learn Sass" section as well as all the documentation.