What is Sass?

Sass is a preproccesser for CSS. Now you're asking, a what?

CSS is very basic, in that it can't do much, but, it's the only language browsers understand still today. If you were to give a browser a Sass file, it's would freak out.

Sass opens up a world of "programming" like features for our styles. Some of the big overlaying features of sass

• Sass gives us variables. We can now say that $primary : #3D4534; and than through the rest of code, do something like color: $primary; and when Sass runs, it's turn $primary into the hexidecimal code the browser can read. Why is this helpful. Because code stays DRY. We define it one spot. It helps keep our styles consistent as well.

• Nesting styles. You can nest rules inside of rules in Sass, and when it runs it will create the appropriate selector the browser an read. For instance in Sass we can do

.header {
  background: red;

  & a {
    color: blue;
  }
}

and Sass will spit out

.header {
  background: red;
}
.header a {
  color: blue
}

Side note: You're probably wondering about the ampersand. In sass, the ampersand in a nested rule just means bring whatever is the parent rule, and put it where the ampersand is.

• Partials. The @import feature is very powerful in Sass, as it allows you to break out your rules into logical files, but you don't get the performance penalty that @import in traditional CSS brings.

+Mixins. Mixins are a great way to dynamically create style rules you can customize. For instance we can define a mixin in our code like this

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

and Sass will create this

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

+Extends. We can extend code from one rule to another. For instance this:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

becomes

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

+Operators. We can do math with Sass. Sass can take this width: 600px / 960px * 100%; and will turn it into width: 62.5%; which is awesome for making your own custom grid sizes.

+Functions, loops, Interpolation, on my. You can even write functions, loops, etc in Sass that will spit out all kinds of code. CSS can get very messy fast, and while we're limited to having to deal with the mess, we can write sass to build all of the messy, repetitive css, and let the computer handle it for us.

There is not a single website today I don't start without Sass. Ever. And the best part is, valid CSS is valid Sass, so you can start using it almost immediately and increase your technicality as you get more comfortable with it.