Get Started with SASS the Easy Way

Warning: Use of undefined constant M - assumed 'M' (this will throw an Error in a future version of PHP) in /home/thinku5/public_html/wp-content/themes/cubano/post-formats/single/standard.php on line 9
Jul
Warning: Use of undefined constant d - assumed 'd' (this will throw an Error in a future version of PHP) in /home/thinku5/public_html/wp-content/themes/cubano/post-formats/single/standard.php on line 9
15

Andrew Sepic

no responses

I’ve begun the great traverse into the wilds of SASS and SCSS. For those who are wondering ‘What is he talking about?’ SASS and SCSS are new ways of working with website style sheets which determine the look of a webpage. The language of CSS has been around for 17 years and in that time it’s changed.. very slightly. SASS and SCSS introduced huge jumps forward for CSS and allows designers and developers to write shorter, simpler and less repetitive code while also adding a ton of functionality and intelligence to CSS.

SASS (Syntactically Awesome Style Sheets) and SCSS(Sassy CSS) differ slightly from each other, SASS being the more extreme rebel, while SCSS is an easier step towards SASS which retains many of the conventions of regular ol’ vanilla CSS. This makes SCSS the choice for many people new to the world of SASS/SCSS.

Both SASS and SCSS use preprocessors to output the more complex SASS files to regular CSS files which can then be read by web browsers and setting up these preprocessors can be most of the challenge when getting going with SASS/SCSS. SASS is based in the Ruby environment and setting it up yourself requires a fair amount of knowledge of setting up your own Ruby environment and working from the command line (yikes!). But gladly there are some options out there for the rest of us.

The Scout App is a free self-contained Ruby Environment which is easily setup and run on Windows/Mac. I’ve used it so far on two projects and besides a few hiccups with folder structures, it’s pretty darn easy to get up and running. You’ll need the latest versions of Java and Adobe Air to get Scout running. Once you do, watch this handy video to help get you running with your first project.

Thanks to The Jared Wilcurt for putting together this video which covers all the basics, way better than I could have myself!

Besides the Scout App, here’s a collection of other handy SASS tools (including Apps) which will be helpful for the new SASS adventure seeker.

So throw caution to the wind and get out there and get SASSY!

Written by Andrew Sepic

Andrew has been helping small business in a variety of sectors successfully brand themselves for the past 7 years. While not designing and working with clients you can find him growing his own food or hiking in the green mountains.