Sass has made writing CSS fun, easy and organized for developers. If you haven’t learned Sass yet, then now is the good to start.
Everyone’s crazy about CSS preprocessors these days and it’s no wonder they’re finding ways to get a hold of Sass skills as well. If you’re not already familiar with Sass (literally known as Syntactically Awesome Style Sheets!), it is the most popular preprocessor of CSS that adds more features to CSS.
So, if you’re looking forward to improving your CSS authoring and organization, Sass know-how is a must-add to your front-end arsenal. However, if you’re a beginner, master your CSS first and then start learning Sass from the basics.
Here we’ve gathered a list of top ten sources that have complete, comprehensive, and easy-to-understand level tutorials on Sass that will take you from beginner to advanced level.
To begin with, leveluptuts has some of the best Sass video tutorials you can find. It has 20 chapters that cover the basics such as how to install Sass, variables, nesting, and mixins; then moves on to more advanced topics such as building your own function, and more.
Sass Lang is the official website of Sass. It is completely devoted to providing tutorial and resources for Sass. But before you get started on the fancy stuff, they walk you through the “Sass Basics”. Once you have installed Sass, you can read the entire article on preprocessing, nesting, variables, mixins, partials, importing, and operators.
This is a fabulous tutorial by scoth.iu that doesn’t only go through the basics but also provides examples to give the reader a clear picture of what they are talking about. I would say that this tutorial is perfect for those who understand better with examples and walkthrough.
If you’re already a fan of Sass, you might have come across the Sass Way, a platform that covers the latest news and topics of building amazing CSS projects with Sass and Compass (a framework for Sass). However, if you haven’t, let’s just say that it’s another place to get started with Sass. They have guides for beginner, intermediate and advanced Sass learners. For beginners there are four comprehensive tutorials on how to get started with the scripting language.
Updated only at the start of this year, this is a complete and thorough beginner’s guide by 1stwebdesigner. The author starts out by explaining the basics such as the purpose of SASS and when should be preferred over other options. With images and examples, you won’t have trouble understanding Sass.
Even for fresh designers and coders, WebDesignerDepot should ring a bell. Yes, apart from awesome freebies, this is also a great place for tutorials. The website also has a great post on how to get started with Sass, covering all of the basics. With large and clear examples, this is an easy-to-understand tutorial.
Tutorialspoint covers Sass in a total of thirteen chapters. If you already know basic word processing, how to create directories and navigate through them, and how to develop simple Web pages through HTML or XHTML, you should be okay. They also offer links to additional resources and readings that might help.
An awesome blog by Treehouse, just like the name suggests, this won’t need a long list of prerequisites. The post has been written in simple and concise words rather than using complex terminologies. However, this post only covers Sass Indented Syntax. It does not go through SCSS or Sassy CSS.
Written by David Demaree for AListAPart, this is a complete and comprehensives article on how to implement Sass for your CSS projects. It covers nesting, variable, mixins, and other basics. For clarification, he also included images of examples, ensuring that you have a firm grip on the language before you move on to the next, more advanced part.
Offerd by skillcrush, this is a short but useful tutorial for getting started on Sass and grasping the basics in an hour or two. As the writer mentions, it’s just a “primer” for basic knowledge of Sass terms. So, it would be best coupled with another extensive tutorial if you want to learn how to start using it.
Sass is certainly a one of the best pre-processing tools for CSS and a surefire way to get your styling well-structured. You might find it a little tricky to get a grasp of it first, but with a little practice you won’t be too far away from being an expert.