A Complete Beginner’s Guide to learning Sass in a weekend
By: Deepina Kapila
Are you interested in learning more about Sass but find that whenever you try to delve in, you’re greeted by a discouraging barrage of technical mumbo jumbo? Are current Intro to Sass tutorials promising help for supposed novices only to assume that this group of (apparently very enlightened) novices has already read every CS book from The Cluetrain Manifesto to the The Pragmatic Programmer and already has an opinion on Less vs Sass?
Is that not you? Don’t worry! It wasn’t me either when I started digging into Sass. It may seem as though Sass requires a handful of traditional computer science knowledge to use, but the reality is that it doesn’t!
This quick guide will break down all the basic terminology and concepts you need to know before you get started with Sass. And we promise, all you’ll find here are simple definitions of must-know, easy-to-grasp terms and concepts (The only prerequisite for this article is a foundational knowledge of HTML & CSS) that will be a primer to your Sass deep-dive. We’ll even restrain ourselves from throwing around the oft used “Feelin’ sassy?” puns as we explore Sass and convince you to give it a go. Once you feel comfy with the terminology mentioned here, we’ll take a look at writing some simple lines of Sass and then I’ll give you a great resource to help you learn Sass in a weekend!
What is Sass? Sass is an acronym for Syntactically Awesome Stylesheets. A Book Apart’s Sass for Web Designers (arguably the best book on the subject currently) defines Sass as a layer between the stylesheets you author and the .css files you serve to the browser. This means that sass is actually written in .scss, then translated using a program into .css for the browser. Sass gives us super features that CSS doesn’t, allowing us to write some lines of code that simplify our overall work and make it easier for us to change things down the road once our style sheets become longer and more complex. Isn’t that nice of Sass? Think of it as a more sophisticated language that is improving CSS by adding advanced or missing functionality – but Sass is no snob. Sass is actually an extension of CSS – so all valid Sass syntax is valid CSS3! Great isn’t it?
Sass doesn’t have a crazy learning curve either – if you know HTML & CSS, you could spend a weekend and come out the other side with an intermediate knowledge of Sass (later, I’ll give you the ONE resource you need to do just that). The other great thing about Sass is that you can use it little by little – start small by converting bits of an old stylesheet first and then keep going until the transition is complete. Once you’re comfy with this exercise, take a look at implementing some advanced mixins into your projects and before you know it, you’ll be well on your way to a solid grasp of Sass.
Note: Sass is just one CSS preprocessor. There are others – Less and Stylus for example, but in my opinion (and the opinions of others way cooler than me), you should focus on building up a Sass skill set.
What is a Preprocessor? You’ve probably read that Sass is a preprocessor. If you’re like me, the first time you heard that you thought “Oh great, are they using “pre” the way the auto industry uses “pre” when stating a vehicle is “pre-owned?” What does that even mean? That the car is used (their intention) or that the car exists in a state prior to being owned (therefore NEW? -my stubborn interpretation). Luckily, the term preprocessor is not confusing at all. It just sounds fancy. A preprocessor is a term from the computer programming world for something that takes some information (Sass) and converts it into something else (plain old CSS) so it can be understood by a third thing (your browser). Simply put, your browser is a processor. And Sass is a preprocessor because it processes the code before your browser does.
What is a mixin? Mixins are your buddies! They are reusable blocks of code that you write/define ONCE and then can use over and over again throughout your project. Think of when you’re writing a stylesheet. You must get tired of declaring your line-height, font-family etc over and over again, no? A mixin gives you the ability to declare these specifics once and use them several times without spending time rewriting the same stuff over and over!
Compiling/Compiler Compiling is the process of converting source code into something that can run on a computer. Simply put, compiling is translating. A compiler is the piece of software that performs the task of translating. In the case of Sass, your command line is the compiler. You need no previous experience with the command line when it comes to Sass – you’ll learn a couple of quick commands you can use very easily to install Sass and do one or two other very simple things, or you can download an app like Scout to use instead of the command line. Don’t let this piece of knowledge worry you and prevent you from learning about Sass – if you take a weekend to dig into Sass, I promise you’ll learn what you need to use it effectively, even if all you have right now is just HTML & CSS knowledge.
Command Line A command line interface (or the command line) is a text-only way of browsing and interacting with your computer. Check out our full tech term here for more on the command line. And have no fear! As I mentioned above, you’ll use the command line for some very very simple things including installing Sass in a matter of seconds because Sass is installed as a Ruby gem. This process is SO. SUPER. SIMPLE. though and the resource I’ll provide you with to learn Sass gives you a quick and super easy way to master the command line and get up and running with Sass. The truth is, you only need to copy a couple of commands to do one or two very quick things with Sass. And again, you can work around the command line if you want to (but you really won’t because it’s so easy and straightforward).
So there you have it! A little primer to (hopefully) demystify some of the terminology you may hear thrown around about Sass.
Read to dig in a little deeper? Check out our post on Sass here. We take a look at some simple Sass you could write today!
Ready for that ONE resource I mentioned earlier to help you master sass? Then pick up this excellent resource by A Book Apart to learn Sass in a weekend! It’s a short and very instructive read. Once you familarize yourself with the concepts in this post, you’ll be able to fly through the book in no time!
Want more articles like this?
Sign up to get the most recent tech news, tips and career advice.