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.
- Open Terminal (to find terminal: Hold down Command, hit Spacebar, let go of Command, type "ter", select Terminal).
- Type
sudo gem install sass, press Enter, type your password, press enter again. - Go get a snack.
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!
cdinto 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-starterand press Enter. Exciting, right?- Type
sass --watch scss:cssand press Enter.scssrefers to the directory we keep Sass in,cssis the directory for our compiled styles. - More exciting! You should see something like this
>>> 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.scssthis 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 inmain.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:
- A nice link
- Simple button mixin - read the notes on best practice!
- Media Query Bubbles! (they seem redundant but Chris Coyier said it's okay in the talk linked below)
- Extends don't work in media query bubbles :(
- Bringing it all together
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.
- Sass Basics - fantastic overview of Sass's primary features. A must read for starters.
- Preprocessing is for Everyone - Chris Coyier talks about preprocessors.
- The Sass Way - Lots and lots of articles from beginner to advanced.
- Sass for Web Designers - Dan Cederholm, A Book Apart
- Structuring a Sass Project - John W. Long
- Another Sassy Starter by Mina Markham. This one is a little more robust, and great!
- Sass for Designers - Laura Kalbag gives a nice overview of Sass stuff that's particularly useful for designers.
- Are we getting too Sassy? - Ashley Nolan.
- Sass vs. Less - CSS-Tricks (or is it LESS still?)
- What is a CSS Framework Anyway? - Harry Roberts
- CSS Guidelines - (yummy) by CSS Wizardry (Harry Roberts)
- Sass Guidelines - (also yummy) by Hugo Giraudel
(note that both of those guides are quite opinionated, use as you see fit!)
- Bourbon (and Neat and Bitters and Refills) - library of mixins, grid, and UI framework.
- Modular Scale - typographic scale thing that is awesome. By Scott Kellum.
- Yes, only two. Write your own styles!
- Modular CSS Naming Conventions - (because naming things is the hardest part), John W. Long
- Even easier BEMing with Sass 3.3 - Stuart Robson
- DRY-ing out your Sass mixins - Sam Richard
- Shop Talk Show - Podcast with Chris Coyier and Dave Rupert, all things front-end. This can get a little advanced, lots of Sass talk though.
- LibSass - a C implementation of a Sass compiler. It's fast.
- Sip - Mac color picker app by the Ola Brothers. Might be my favorite thing in the world. Well, besides an expertly made Negroni.
- Sidebar.io - this is how to stay up to date with the ever-changing web landscape.
- .ish - Responsive site testing, Brad Frost (read everything he writes, ever)
- Eye Bleach - lolz