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)

Using nested rules (Must know)

"Nested rules in CSS...?" How do they work, I hear you ask? Well, it's a very simple principle; your website's stylesheet will have any number of styles within it, all of which will be used in some form or other within your site or application. The trouble is, you are likely have to write duplicate styles in order to reference specific objects on screen. We'll see how you can avoid doing this, as part of the next exercise.

Getting ready

Right – I'm going to throw you in the deep end…no, only joking!

You won't need a great deal for this exercise, as most of it will be completed in your trusty editor, which I hope will be the Sublime Text 2 application we installed earlier in this book. If you don't use Sublime Text 2, then you will need to have an instance of SASS' watch command running in the background, to compile code.

You will also need two images, which we will call tab_a.png and tab_b.png. Copies of these images are available in the code download that accompanies this book. If you prefer to change the colors (as I am no artist!), then please feel free to do so. As long as you keep the same names then this will be fine. You can use a site such as Tabs Generator ( to generate the initial tabs; you are likely to need something like PhotoShop or GIMP to edit them to size.

How to do it...

  1. Let's open our text editor, and add the following to a copy of the template from the start of this book, and then save it as nestedexample.html:

      <ul id="menu">
        <li id="home"><a href="index.html"><b>Home</b></a></li>
        <li id="about"><a href="about.html">
          <b>About Us</b></a></li>
        <li id="products"><a href="products.html">
        <li id="support"><a href="support.html">
        <li id="contact"><a href="contact.html">
  2. You'll need to add this to the <head> section of your code:

    <link rel="stylesheet" type="text/css" href="single_one.css">
  3. Let's now add in the styles to single_one.scss, that will turn our unordered list into a menu, beginning with two base mixins:

    @mixin menuposition{
      li a {background-position: right -51px; margin-top: -2px; height: 35px;}
    @mixin menuposition_hover{
      li a b {background-position: left -51px; height: 40px;}
  4. Next come the styles that will control the appearance of our menu:

    #menu {
      padding: 0; margin: 0; list-style: none;
      li {
        float: left; margin-left: 1px; padding-top: 2px;
        a {
          display: block; 
          height: 38px; 
          line-height: 38px; 
          padding: 0 20px 0 0; 
          float: left; 
          background: url(tab_a.png) no-repeat right top;
          color: #fff; 
          text-decoration: none;
          &:hover {
            background-position: right -51px; margin-top: -2px; height: 40px;
          &:hover b {
            background-position: left -51px; height: 40px;
        a b {
          display: block; 
          height: 38px; 
          float: left; 
          padding: 0 0 0 20px; 
          background: url(tab_b.png) left top; 
          cursor: pointer;
  5. The last part of the SCSS code assigns the styles to our menu selector IDs:

    #menu {
      #home {@include menuposition; @include menuposition_hover;}
      #about {@include menuposition; @include menuposition_hover;}
      #products {@include menuposition; @include menuposition_hover;}
      #support {@include menuposition; @include menuposition_hover;}
      #contact {@include menuposition; @include menuposition_hover;}
  6. If all is well, you should see something similar to the following screenshot, when you save and preview your work in a browser:

How it works...

The key to this exercise is in the #menu block of CSS code – this contains the nested styles that are used by the menu. SASS is able to understand that inner rules will only be applied within the outer rule's selector. This allows you to avoid repetition that you would otherwise get if you were writing styles that are inherited from a parent style. It also means that the code becomes more readable, as the code is in a format that is more logical to the human mind.

There's more...

Some of the more observant of you may have noticed the ampersand (&) being used in this block of code, and one other:

  &:hover {
    background-position: right -51px; margin-top: -2px; height: 40px;

The ampersand has a special meaning in SASS; it references the parent selector in the same way as the other styles do, but the difference here is that the & character is used when you have special styles such as :hover or :visited. When compiled, the code will look something like the following code snippet:

  #menu li a:hover {
    background-position: right -51px;
    margin-top: -2px;
  height: 40px; }

It's time to turn our attention to another part of the library, which is SASSScript. Before we do this, we need to make a small diversion, to look at a small but important part of the library – using comments in SASS – as part of the next recipe.