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?
- 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?
- 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
$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
$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
// 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
@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?
Playing with SASS
Using Foundation on your personal site
things to put into the playground
- text, background colors; grid sizes; div types; font sizes;