Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

@extend is a preprocessor concept that allows you to essentially apply all the properties of one selector onto another. In Sass:

.module {
  padding: 1rem;
  border: 1px solid #ccc;
.something-else {
  @extend .module;

This is a concept available in other preprocessors as well.

Basic Usage on CodePen

This works fine on CodePen as-is. But let’s say you wanted to move away that .module rule elsewhere and @extend from where you’ve moved it. You can do that! One way would be to make another Pen to put all that stuff, then include it as an external resource. Once you’ve done that, you can extend from it:

The important thing here is: the preprocessors on both Pens have to match. SCSS and SCSS, Less and Less, etc.

See the Pen Parent, doing the importing by Chris Coyier (@chriscoyier) on CodePen.

You Can’t Extend .css in Sass

Like I just mentioned, the preprocessors need to match, which also means including a .css file as an external resource work work for extending.

For example, if I made our base Pen just CSS, the parent including it as an external resource and extending it will now fail:

This is true outside of CodePen as well, at least with Sass. I’m 82% sure this is true of Stylus as well.

You Can Extend from .css in Less

Less has a way of treating @import files as Less files, even if they are just .css. To replicate our demo so far, we’d do this:

@import (less) "http://codepen.io/chriscoyier/pen/GNpGQx.css";

.custom-thing:extend(.module) {}

And not include that Pen as an external resource, as we’re doing that right in the code.