• Skip to main content

Rafal Tomal

Learn Design and Create Better Websites

  • About
  • Courses
  • Tools
  • Tips
  • Blog
  • Contact
  • Work With Me →

← More Design Tips

How to start using Sass

posted on October 12, 2018

TweetFacebookLinkedInPin

Sass is a wonderful extension to CSS. If you always wanted to give it a try, but it seemed overwhelming, here’s a quick guide for Mac users (you can find other install options here):

Install sass on your computer:

  1. Open up the Terminal.
  2. Type in gem install sass and hit enter.
    gem install sass

Create a new style.scss file in your project folder next to your original style.css file and then:

  1. Type in cd and drag your project folder from Finder to your terminal window and hit enter.
  2. Type in sass –watch style.scss:style.css and hit enter.

Now, any time you make changes to style.scss and save them, it’ll automatically generate a new style.css file for you. If you want sass to stop watching your file, press ctrl+z or ctrl+c in the terminal or simply close it.

Remember to never edit the .css output file because it’ll be overridden every time you save your .scss file. You can use sass –watch –style compressed style.scss:style.css to automatically compress the output.

Learn more here about Sass and have fun!

tags: code

Previous tip: Center-aligned headline and left-aligned body text
Next tip: Organize your project files for developers

Don't Miss Future Design Tips

Join 20k+ people who love good design. Get my best tips, resources, and strategies to elevate your design skills and grow your business.

© Copyright 2008 - 2025 Rafal Tomal.

Affiliate Program . Privacy Policy . Cookie Policy . License .

Follow me on Twitter, Dribbble, and Instagram.

DISCLOSURE: I may be an affiliate for products that I recommend. If you purchase those items through my links I will earn a commission. You will not pay more when buying a product through my link. It helps me to continue to offer you lots of free stuff. Thank you, in advance for your support!