Book Image

Instant SASS CSS How-to

By : Alex Libby
1 (1)
Book Image

Instant SASS CSS How-to

1 (1)
By: Alex Libby

Overview of this book

CSS styling has been a key part of developing for the Internet since the early 1990s, but unlike JavaScript, has suffered from the inability to produce dynamic styles, using functions, operators, and variables. SASS uses the power of Ruby to bring support for all three and more to your CSS, allowing you to engage in a more efficient, modular style of working, and making it easier to maintain your CSS styling in your projects.Instant SASS CSS How-to is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the power of SASS, and give you a good grounding in writing and compiling CSS style sheets using the SASS pre-processor language.This book looks at how you can incorporate SASS into your web pages, and either produce style sheets dynamically, or pre-compile them before including the final article into your site's pages.You will also learn how you can use the power of mixins, functions, and variables to help produce style sheets, and reduce the amount of code you need to write in your style sheets. We will also take a look at how you can incorporate a more modular style to your development workflow, which will help with making style sheets more manageable and easier to update in the future. We will also take a look at how you can build up libraries of reusable code that you can incorporate into your future projects.You will learn everything you need to know to start using SASS to help produce more efficient style sheets in your site's pages, and adopt a more modular development workflow, which will make it easier to maintain your sites in the future.
Table of Contents (7 chapters)

Controlling output in SASS (Must know)

How many times, when you've visited sites, have you seen any number of social media icons at the bottom of postings? I certainly have and that's saying something, for the 3000-plus bookmarked sites I've bookmarked over the years! (I think it went as high as 12,000+ sites before I trimmed out the duplicates, chuckle!).

Normally you might embed icons in the page for them and build up similar styles for each – this could potentially be a real bore, as the styles won't change from icon to icon and it is likely to produce a lot of code! Now, how about producing the same amount of compiled code, but from less than 20 lines of code? We'll see how, as part of the next exercise.

Getting ready

You'll need your trusty text editor. Ideally this should be Sublime Text 2, as we will be compiling SCSS code. We'll also need some social media icons, for which there are plenty of sources available on the Internet. As an example, you could try the ones available at GoSquared ( As well as getting the icons, you will need to rename each icon you use to the format icon-XXXXXX.png, where XXXXXX is the name of the social network, such as LinkedIn. I will assume we are using these icons during the exercise, and that they have been suitably renamed.

How to do it...

  1. We'll begin by creating our template. Go ahead and create a new document, and add the following code in the <head> tag area. Then save it as socialmedia.html.

    <link rel="stylesheet" type="text/css" href="socialmedia.css">
    <link href='' rel='stylesheet' type='text/css'>
  2. Add the following code in between the <body> tags:

      <a class="icon-deviantart" href="">deviantart</a>
      <a class="icon-digg" href="">digg</a>
      <a class="icon-facebook" href="">facebook</a>
      <a class="icon-forrst" href="">forrst</a>
      <a class="icon-lastfm" href=""></a>
  3. Next up we'll need our SCSS code, so create a new SCSS file in Sublime Text 2, and save it as socialmedia.scss. Add the following code:

    @each $socnet in facebook, digg, deviantart, forrst, lastfm {
      a.icon-#{$socnet} {
        padding: 5px 40px 20px; color: #8B4513; display: block;
        background: url('images/icon-#{$socnet}.png') no-repeat left top; width: 100px; font-family: 'Macondo', cursive;
        font-weight: bold; font-size: 24px; text-decoration: none;
        &:hover {
          text-decoration: underline;
  4. If all is well, you will see the following screenshot when you preview your work in a browser (we've added a Google Web font, to give the icons some style!):

How it works...

Although this exercise was deliberately designed to be simple, it serves up a perfect example of how you can cut down the amount of code you need to write, while still maintaining the same result.

Here, we've used the power of @each to loop through each name specified, and to create the appropriate styles using the rules specified:

padding: 5px 40px 20px;
color: #8B4513;
display: block;
background: url('images/icon-#{$socnet}.png') no-repeat left top;
width: 100px;
font-family: 'Macondo', cursive;
font-weight: bold;
font-size: 24px;

The beauty of this is that it cuts down the amount of repetitive code you have to write in your stylesheet. Provided the same format is used throughout, then each icon will receive the same styles (apart from the name of the image, naturally). To see how effective this is, have a look at the compiled code in Sublime Text 2. My copy listed 64 lines of styling code, compared to the 16 we've had to write. That's a real difference, isn't it?


A small word of advice. This is a very powerful part of the library; the developers recommend that this should only be used when creating mixins, and not in the course of day to day styling as they require a fair amount of flexibility.

Let's move on, and turn our attention to another part of the library, and one I am sure you will be using regularly – mixins. I'll show you how over time, you can build up a library of reusable code that can be dropped in at a moment's notice.