Spring cleaning the theme

June 19, 2012

With the end of exams, I decided it was a good time for a spring clean of the blog’s look and feel. This served as a great re-introduction to the best bits of SCSS, some of which I shall cover here.

There are several meta-languages which compile down to CSS, the one I am most familiar with being SCSS, but another commonly used one is LESS, which is used in Twitter Bootstrap. A good comparison of the features of the two can be found here.

My favourite features of the SCSS language and its associated tools are the following:

CSS selector nesting

nav {
        text-align: left;
        margin-right: 2em;

        ul {
            @include no-bullets;
        }
    }

Which makes for much more readable stylesheets. The logical flow of the styling works really well, and allows for good compartmentalisation of the code.

Variables

Possibly controversial, but can be really useful with colour scheming - using variables to store the colour HTML code, and then simply using the variable later in the sheet, allowing a one-stop update of colour scheme. In addition you can couple this with SASS functions such as darken() to change the colour tone within the sheet. From the SCSS documentation:

$blue: #3bbfce;

    .content-navigation {
        border-color: $blue;
        color:
            darken($blue, 9%);
    }

Compass Mixins

When using SCSS with Compass, which I’ve mentioned before here, you also get the ability to include whole bunches of boilerplate mixins.

Personal favourites include the Border Radius mixin, which includes all the necessary browser prefixes for CSS3 Border Radius. Also the lists mixin for horizontal and bullet-less lists. An example of just how useful the Border Radius mixin is follows:

@import "compass/css3/border-radius";

    .thumbnail {
        border: 1px solid #DDD;
        @include border-radius(4px, 4px);
    }

Once Compass is run, you get the following CSS, saving a lot of boilerplate code.

.thumbnail{
        border: 1px solid #DDD;
        -webkit-border-radius:4px 4px;
        -moz-border-radius:4px / 4px;
        -ms-border-radius:4px / 4px;
        -o-border-radius:4px / 4px;
        border-radius:4px / 4px
    }

Additional Mixins

When re-themeing the blog, I also came across Bourbon, a SASS Mixins library from ThoughtBot. My personal favourite was their Golden Ratio function, which allows the scaling of font-sizes according to the Golden Ratio, giving a quick function for automatically setting the font sizes of h1-h3.