Introduction to SASS

Laying down the foundation on which we'll be building all of our SASS knowledge..

Scroll down...

Content

Resources

Comments

SASS logo

If you've experienced the frustration of trying to nest CSS properties inside each other by writing long strings of selectors, SASS will make your life easier. If you've noticed repetition in the way you define certain properties like colors, SASS is for you. If you really just want a little bit of code-like functionality in your CSS... yep, SASS has the answer.

What is SASS?

SASS ("Syntactically Awesome StyleSheets") is a CSS preprocessor, which means that it takes a file filled with SASS styles and then compiles it down into a valid CSS file. Actually, the SASS language is a superset of CSS so any valid CSS file is also a valid SASS file. Practically speaking, that means that SASS functionality just layers on top of CSS -- you can choose to use it or ignore it, but it will certainly make your life easier.

So, let's recap here. SASS is just CSS with some magical powers added. You can make use of those powers or not. Your choice. Syntactically speaking, they're very similar. So then, how does SASS get translated to CSS? Well, there are programs that do that for you. Some options are to do it in the browser (slow) or at build time (using a build tool like Webpack, Grunt or Gulp). Don't worry if some of these buzz workd seem foreign. Much will clear later. The important thing to remember here is that SASS can and will be compiled to CSS, so the browser will receive what it expects, even if you decide to embrace preprocessors.

In this unit we'll take you through the features of SASS and show you how to use it to make your style sheets DRY and organized. The simplest example of how you can benefit from using SASS is by comparing an example of targeting nested selectors. Consider the following CSS:

#main-nav,
#main-nav ul {
  padding: 0;
  margin: 0;
}
#main-nav li {
  float: left;
  display: block;
  width: 20%;
  text-align: center;
}

Now see how SASS can clean that repetition up with nesting:

#main-nav {
  &,
  ul {
    padding: 0;
    margin: 0;
  }
  li {
    float: left;
    display: block;
    width: 20%;
    text-align: center;
  }
}

Wrapping Up

This is just scratching the surface of what SASS can do to clean up your CSS. Over the course of this unit you'll be introduced to various SASS features that allow you to do all those things you wished CSS had. After writing raw CSS from scratch for the projects you've taken on you must be excited to get started with SASS so let's go!



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: SASS Features