#1 Referencing parent selectors in Sass

This is literally a small but I think noteworthy bit I want to start this blog with.

Styling Sencha Touch applications using Sass and its built-in helpers is just fun, to say the least. :)

Being able to nest rules in Sass is really nice and keeps your styling code DRY. In order to get the most out of nesting rules, you sometimes need to reference a parent selector (instead of repeating it).

That's what the ampersand & is for.

First example

Let me demonstrate its use in a small example where we transform a plain HTML bullet list into a iOS-like style.

First you see a screenshot of the starting point and its final result. We start with no custom styling except for the padding to prevent the text from clashing with the border.

Before

After

Here's our final Sass file using SCSS syntax.

$app-border-color: gray;
$app-border-radius: 5px;

ul {
    border: 1px solid $app-border-color;
    border-radius: $app-border-radius;
    padding-left: 0px;
    margin-top: 5px;

    li {
        padding: 10px;
        list-style-type: none;
        border-bottom: 1px solid $app-border-color;

        &:last-child {
            border-bottom: none;
        }
    }
}

The last rule uses the pseudo selector class :last-child. Without using the ampersand, we would need to repeat the li selector as in the following code.

$app-border-color: gray;
$app-border-radius: 5px;

ul {
    border: 1px solid $app-border-color;
    border-radius: $app-border-radius;
    padding-left: 0px;
    margin-top: 5px;

    li {
        padding: 10px;
        list-style-type: none;
        border-bottom: 1px solid $app-border-color;
    }
    
    li:last-child {
        border-bottom: none;
    }
}

Here's also the generated CSS code, which shows the verbosity we save by using Sass and its nested rules and ampersand.

ul {
  border: 1px solid gray;
  border-radius: 5px;
  padding-left: 0px;
  margin-top: 5px;
}

ul li {
  padding: 10px;
  list-style-type: none;
  border-bottom: 1px solid gray;
}

ul li:last-child {
  border-bottom: none;
}

Even though we aren't necessarily saving a lot of characters in this example, it improves its readability, cleanness and ease of maintenance.

Second example

Let me show you another quick example.

In a project of mine I needed to lighten the borders of the toolbar buttons, including the back and forward buttons. Here's is a screenshot of before and after. It's not very obvious, but the borders on the right are lighter.

Before

After

I did that with the following Sass code:

.x-toolbar-light {
  .x-button {
    border: .1em solid darken($base-color, 20%);
    border-top-color: darken($base-color, 15%);

    &.x-button-back:before,
    &.x-button-forward:before {
      background: darken($base-color, 20%);
    }
  }
}

As the back and forward button's DOM nodes use x-button x-button-back as its class definition, we needed to override .x-button.x-button-back and .x-button.x-button-forward in order to apply our custom styles.

Without the ampersand, we'd need to do the following:

.x-toolbar-light {
  .x-button {
    border: .1em solid darken($base-color, 20%);
    border-top-color: darken($base-color, 15%);
  }
  
  .x-button.x-button-back:before,
  .x-button.x-button-forward:before {
    background: darken($base-color, 20%);
  }
}

And here's the generated CSS code:

.x-toolbar-light .x-button {
  border: 0.1em solid #aaaaaa;
  border-top-color: #b7b7b7;
}

.x-toolbar-light .x-button.x-button-back:before,
.x-toolbar-light .x-button.x-button-forward:before {
  background: #aaaaaa;
}

You clearly see the difference between the clean and DRY Sass and the verbose CSS file.

I hope you liked this article about this literally small but again noteworthy bit for styling Sencha Touch applications. More articles to come soon.