I feel like there aren't many super stripped down resources for starting out with Sass* - everything seems to jump straight into mixins and frameworks and all that. Here's a ready to roll setup for your Sass projects that can be used anywhere!
Jump to a certain section if you like:
* Sass, not SASS (proof).
** Everyone does this differently, this is how I do it!
Very Mac-centric instructions follow. Windows users can find instructions here.
sudo gem install sass, press Enter, type your password, press enter again.Seriously, that's it! Except these things rarely work the first time...
If you are having trouble, copy and paste your error into our good friend Google. You might also take a read through these installation instructions.
Note that you can totally use an app like Codekit or Hammer, but I think this is an excellent opportunity to get your hands dirty in the command line. Make things hard for yourself - it will pay off in the long run, I promise!
Test by typing in terminal sass -v. If you get a -bash error, then you don't have it installed. If you get something like Sass 3.4.22 (Selective Steve), proceed to the next section!
cd into the 'simple-sassy-starter' directory. If you are storing the folder on your desktop, you could copy and paste this line instead: cd ~/Desktop/simple-sassy-starter and press Enter. Exciting, right?sass --watch scss:css and press Enter. scss refers to the directory we keep Sass in, css is the directory for our compiled styles.>>> Sass is watching for changes. Press Ctrl-C to Stop.Omg there are so many! Why can't I just write everything in style.css like I used to?
Take it from me, the power of Sass lies in partials. A partial is a baby Sass file that starts with an underscore and is included in the main stylesheet. You know how your stylesheets before got to be, like, 1,500 lines long? Partials are a way to separate out that code into sections, and encourage you to write more reusable and "modular" (hello, buzzword) code.
Hopefully that makes a little bit of sense. I've separated everything out like this:
main.scss - this is where we include all of the partials. Don't write any styles in here.vendor/ - this is third party code, you probably won't edit anything in here. I've included normalize for our CSS reset, as well as animate.css (.scss in our case) for fun.utility/ - other than _helpers.scss this code won't compile to anything, rather, these are the variables and functions you'll use throughout your partials.partials/ - this is where your styles go. Add partials and change their names to whatever makes sense for you, just be sure to update and include them in main.scss._shame.scss - put all styles you know you shouldn't be writing here (coined by Harry Roberts, read more here).Note that order these are included in main.scss is very important. Read more in the code comments.
I didn't include a grid here. You're on your own for that. Grids are a very personal choice, and these days, you don't really need any third-party grid tool. Learn CSS Grid Layout and you'll never go back!
Time to experience the magic. I recommend following along with the Sass Basics guide to get the feel for Sass, then read up on some more stuff in the Further Reading section below before starting on a real project. There are a few examples in the code, too.
If you want to play around a bit before diving into your real code, or if you had a problem installing Sass and don't feel like figuring it out (I totes sympathize), check out these snippets on the lovely Sassmeister:
Sass itself is awesome, but the real reason it's awesome is because of the community. Here's a big dump of links and articles I think are helpful.
(note that both of those guides are quite opinionated, use as you see fit!)