The start of the second semester of Starter School is finally here. The next three months will be focused on design and front-end development. We’re now entering uncharted territory as far as programming bootcamps go: a full front-end curriculum to complement the back-end concepts that we have been learning since late September. It was a short week of class, but we hit the ground running with some more advanced CSS.

SASS

Our new head teacher, Sandy Weisz, introduced us to SASS, a new way to write CSS. SASS stands for Syntactically Awesome StyleSheets, and adds some pretty powerful features to CSS.

Selector Nesting

The first one of these features is being able to nest your selectors. Writing code like this is not DRY:

```css Not DRY

div { font-family: Helvetica; }

div ul { border: 1px black solid; }

div ul li { color: blue; }


Having to repeat yourself like this can get frustrating as your CSS file grows. SASS lets you dry this up with selector nesting:

```scss DRY with SASS

div {
  font-family: Helvetica;
  
  ul {
    border: 1px black solid;
	
	  li {
	    color: blue;
	  }
  }
}

This allows you to visualize your CSS in a nested heirarchy similar to that of your HTML markup.

Variables

With SASS, you can define variables to hold commonly used values, just like you would in any programming language. This is great because you can change the value of a certain attribute in many places in your code very easily.

```scss variables

$main-color: #333

div { color: $main-color;

li { border-bottom: 1px $main-color solid } }

Now, if you change the value of main color to <code>#666</code>, the value will change for every instance of <code>$main-color</code> in your code.


#### Mixins ####

Another useful feature of SASS is the use of mixins. Mixins allow you to abstract commonly used CSS rules so you don't have to re-type them every time you want to use them. Here's an example: 

```scss mixins

@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model;
  -moz-box-sizing: $box-model;
  box-sizing: $box-model;
}

// Now that the mixin is defined, you can use it anywhere in the code with the @include keyword

*,
*:after,
*:before {
  @include box-sizing(border-box);
  }

The pure CSS output for this:

```css Output

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

``` These are just a few useful things that SASS gives you. This upcoming week, we’ll be getting into the basics of responsive design.