SPEEDING UP FRONTEND DEVELOPMENT WORKFLOWS WITH SASS | Tutorial
What is SASS?
SASS (Syntactically Awesome Stylesheets) is the web’s most popular CSS preprocessing framework. Unlike typical stylesheets, SASS files is not directly readable by web browsers (yet), but it is much developer friendly. Once a SASS file is saved it is then compiled to plain CSS so long as the compiler is installed and ran. With SASS you can use features that CSS doesn’t have yet, like variables, nesting and mixins that make building complex stylesheets easy and efficient. SASS is considered a superset of CSS (similar to how C++ is a superset of the C language) which means that any valid CSS is also valid SASS.
Installing SASS
Technically speaking, SASS is a Ruby Gem. A Gem is a library of code that extends the Ruby language adding new functionality. Don’t worry, to use SASS you do not need to know ruby, that is simply the code that the compiler is written in. If you are a die-hard command line lover (and you have ruby installed) simply type in gem install sass
. For those who don’t like to do things through the command line, you’re in luck! There are plenty of programs available across all platforms that will get the job done much more efficiently (and automatically).
CodeKit ($28+ Mac Only)
Hands down, CodeKit is the best program available available for SASS and so much more. If the price tag scares you, don’t worry, CodeKit comes with a 10 day free trial where you can decide for yourself whether it’s worth it. Out of the box, CodeKit has support for popular front-end development tools such as SASS, Compass, Bourbon, CoffeeScript, Image Optimization (lossless compression), LiveReload and so much more. If you are developing on a Mac, this is the app for you.
Compass.app ($10 – Mac, PC & Linux)
If you would rather something that is more cross-OS compatible, Compass.app is your next-best choice. With a little bit of setup, Compass.app can support LiveReload (through Guard-Livereload and browser extensions).
If none of these apps work for you, here are some other ones to try out:
- Scout (Free – Windows & Mac)
- LiveReload ($9.99 for Mac, Free for Windows but it’s an Alpha program)
- Prepros Pro ($24 – Mac & Windows, also a free version)
Starting Your own SASS Project
Now that you have SASS installed, its time to start coding. The first thing to do is to start the project which is done differently for each program, please refer to the programs documentation or installation instructions on how to do that. Once you have added a project, you have to decide whether to use sass or scss syntax. The main difference is scss uses css-like punctuation (curly braces, colons and semicolons), while sass syntax does not. Personally, I use scss syntax as it’s what I’m used to. You can use .sass and .scss extensions respectively for each syntax:
Source : TUTVID