Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Easy next-gen stylesheet creation with SASS

Saturday, May 7th, 2011 by Servage

SASS stands for Syntactically Awesome Stylesheets, and is an addition to CSS3. It’s meant to make CSS3 generation easier and more fun. Since browser differences and complex CSS definitions have made the stylesheet creation a very complex task, SASS enables the designer to get great results fast.

Some of the core features of SASS are the ability to use variables, nested rules, mixins and selector inheritance. This functionality makes CSS creation more script-like, and you get better CSS with less code. After creation, SASS uses Compass to compile your final stylesheet. This step also compresses your stylesheet to the smallest possible size, by reducing the entire file to one line and removing all unnecessary characters. Maybe desktop users don’t care, because load times with today’s broadband connections are amazingly fast. But mobile users will care, because a 50kb or 100kb stylesheet does matter. On top of that, it is possible to include images directly in the stylesheet (i.e. not a reference to the image location, but the actual image file data itself). This obviously blows up the size of the stylesheet, but you do not have to load external image files. This will save your mobile user for a lot of extra requests to the server – and can easily optimize your page load time by multiple seconds on mobile devices.

SASS uses a syntax called SCSS (filetype .scss in case you wonder). Here are examples from the SASS website that illustrate how powerful this can be.

Variables

Use the same color all over the place? Need to do some math with height and width and text size? Sass supports variables as well as basic math operations and many useful functions.

$blue: #3bbfce;
$margin: 16px;

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

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Creates the following CSS:

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Nesting

Sass avoids repetition by nesting selectors within one another. The same thing works with properties.

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Creates the following CSS:

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

Mixins

Even more useful than variables, mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments.

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

Creates the following CSS:

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Selector inheritance

Sass can tell one selector to inherit all the styles of another without duplicating the CSS properties.

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}
Easy next-gen stylesheet creation with SASS, 3.9 out of 5 based on 8 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.