Append the parent selector to the end with Sass

Sass 3.2 and older

The only thing you can do is reverse your nesting or not nest at all: .social-media {

    /* ... */

    .twitter { 
        /* ... */
    }
    .facebook {
        /* ... */
    }
}

ul.social-media {
    /* ... */
}

Sass 3.3 and later

You can do that using interpolation and the @at-root directive:

.social-media {
    /* ... */

    // Here's the solution:
    @at-root ul#{&} {
        /* ... */
    }
}

However, if your parent selector contains multiple selectors, you'll need to use selector-append instead:

.social-media, .doodads {
    /* ... */

    // Here's the solution:
    @at-root #{selector-append(ul, &)} {
        /* ... */
    }
}

Output:

.social-media, .doodads {
  /* ... */
}
ul.social-media, ul.doodads {
  /* ... */
}