Lab 1l: From CSS to SASS!

Now that you are alll HTML/CSS/PHP ninjas…. it’s time for the next language! The web frmework we’re using – “Foundation” – uses a language called SASS to manage style instructions. It takes a little getting used to be soon you will start to love it, I promise.

What’s wrong with plain old CSS?

CSS is great, but it has some problems:

it’s repetitive
often you find yourself writing the same color codes over and over again in different selectors:
h1 {
    color: #ab23ab;
}
h2 {
    color: #ab23ab;
}
it’s brittle
you may spend a long time figuring out the right proportions between, say, the font sizes for h1, h2,h3, and h4, or the right dimensions for div.class1 and div.class2. Then as you’re working, you find you actually want h1 to be smaller, or div.class2 to take up more of the screen. Then you have to go back to your CSS and modify all of the individual values you just entered.
h1 {
    font-size: 2.0rem;
}
h2 {
    font-size: 1.8rem;
}
h3 {
    font-size: 1.6rem;
}

div.class1 {
    width: 38%;
}

div.class2 {
    width: 58%
}
it’s hard to read
when CSS files get complicated, they also tend to get a little convoluted; it can be difficult to make a logical, easy-to-follow structure that makes sense of everything.

What’s the solution?

More and more web developers have turned to CSS preprocessors as a solution to this tricky problem. A preprocessor extends the CSS language to make it capable of more cool tricks, and when you’re ready, processes the code you’ve written to allow browsers to read it. In effect they are new languages, which are “supersets” of the CSS language. The two main preprocessors are SASS and LESS, and in our class we will use SASS (for no really good reason, just because). SASS lets you:

  • stop repeating yourself
  • write cleaner code
  • and as a result, write maintainable code – code that it’s easy to understand when you come back to look at it two weeks or six months or two years later.

How does it do this, you might ask? Well, let’s see.

Variables

By now you should be getting a sense of how fantastic variables are. PHP templates would be useless without them – they let wordpress insert different text and HTMl content in the various slots that you’ve provided in your layout. For instance, $post->title is a variable (actually, it’s an object property, but let’s not be too formal), that retrieves… the Title! Almost all programming languages use variables, but CSS doesn’t. However: SASS does! 

$header-color: #eeeeee;
h1 {
  color: $header-color;
  font-size:  44px;
  }
h2 {
    color: $header-color;
    font-size: 37px;  
}

This will generate the following CSS: 

h1 {
     color: #eeeeee;
     font-size:  44px;
     }
h2 {
    color: #eeeeee;
    font-size: 37px;  
}

check it out! Now whenever you want two elements to be the same color, you can just type the variable name instead of inserting a complicated color code. And you can change the color of a bunch of elements all at once, simply by changing the variable value.

Functions

You can also manipulate values using functions. You can write your own functions (complicated!) or use the built-in functions SASS provides. Here’s an example. 

$header-color: #eeeeee;
h1 {
  color:$header-color;
  background-color: scale-color($header-color, $lightness=30%)
  }

h2 {
  color: scale-color($header-color, $lightness=-10%);
  }

There are many built-in color manipulation functions in SASS. Here’s a partial list:

  • darken()
  • lighten()
  • saturate()
  • desaturate()
  • adjust-hue()
  • invert()
  • complement()
  • scale-color()

scale-color() is probably the most versatile. Let’s look at it again: 

background-color: scale-color($header-color, $lightness:30%)

Note the different parts: scale-color ($header-color, $lightness=30%). This function takes one main argument – a color – and also a number of possible “parameters”, of the form: 

$lightness:-XX%, hue:-XXXdeg, saturation:-XX%, red:XX, blue:xXX, green:XX

You can see in our example that I make the header text color by lightening the header background.

Loops and Conditionals

SASS contains all the basic programming syntax you want from a simple language: conditionals, loops, and a few other tricks. So for instance, you can try: 

// the number of columns
@for $i from 1 through $total-columns {
  .fade-#{$i} {
    background-color: scale-color($body-bg, $lightness:-15%*$i);
    color: scale-color($green, $lightness:15%*($i - 1));

  }
}

This piece of code will create a bunch of CSS stanzas, like this: 

.fade-1 {
  background-color: #d9d9d9;
  color: #33cc33; }

.fade-2 {
  background-color: #b3b3b3;
  color: #70db70; }

.fade-3 {
  background-color: #8c8c8c;
  color: #adebad; }

.fade-4 {
  background-color: #666666;
  color: #ebfaeb; }

Mixins

It gets even crazier! You can define “mixins” that you can add to whatever classes you want. These mixins can contain complicated functions or whatever. Here’s an example: 

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

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

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

This generates the code: 

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

Excited yet?

You Should be. There is still plenty to learn, but we’ll stop here for now. check out the SASS website for more info.

Playing with SASS

I have a series of JSBins set up from last year, here they are:

Using Foundation on your personal site

For fun, I have also enabled real-time compiling of SCSS files in the “grunterie” theme on your personal websites. Feel free to try it out!

things to put into the playground

  • text, background colors; grid sizes; div types; font sizes;