by Aaron Froehlich

I still remember the first time I realized the power of "C" in CSS. Sass and LESS take cascading to a whole new level of fun and power, and if you're not already using it, then you're really missing out.

I've long known about the ampersand (&) character, which is often referred to as the "parent selector." In actually becomes a replacement for the currently scoped element (similar to "this" in javascript). You can see how it works below:

In the code above, the ampersand on line 5 grabs the current context, or h1, and adds a class to it. This is really great and allows you to easily create base styles for a given element and then extend the element with classes. However, did you know that Sass can be used just as effectively to create "Ascending Style Sheets (ASS)"? Up until recently, CSS hierarchies only moved in one direction (cascading downwards). By swapping the location of our ampersand friend above from the beginning of the declaration to the end, we're effectively pushing the current selector scope to the end of the declaration, giving us access to a completely new nested hierarchy. 

This is particularly useful when you have the same markup in two areas of the page and want to target them differently. The following snippet offers an example of how you might turn a horizontal nav into a vertical nav when it appears in a sidebar:

With the ampersand at the end of the line, the declaration reads "aside plus the current selector". Suddenly, you've created an entirely new cascade, without ever leaving your nest.