New thing! Now you can use the CSS and JavaScript of existing Pens as external resources in other Pens. This quick 9 minute video is the best way to understand what it can help you with:
At its most basic, it’s a URL pattern that exposes the raw scripts/styles. Just add “.css” or “.js” to the end of the editor URL (i.e. /pen/), like this:
http://codepen.io/chriscoyier/pen/ijaeh.css
http://codepen.io/chriscoyier/pen/hgplm.jsYou can add “.html” and get the that also, but you can’t use HTML as an external resource (yet). No matter what preprocessor is in use, you will see the preprocessed (compiled) code if you use “.css”, “.html”, or “.js” at the end of the URL.
You can also add the preprocessor file extension to see the UN-preprocessed code. Here’s how that all breaks down:
| If a Pen is… | Raw Code | Preprocessed Code | |
|---|---|---|---|
| HTML | Raw HTML | .html | N/A |
| Markdown | .markdown | .html | |
| Slim | .slim | .html | |
| HAML | .haml | .html | |
| CSS | Raw CSS | .css | N/A |
| Sass | .sass | .css | |
| SCSS | .scss | .css | |
| LESS | .less | .css | |
| JS | Raw JS | .js | N/A |
| CoffeeScript | .coffeescript | .js |
Or… let it auto-detect
To add to another Pen as an external resource, you don’t have to include the extension, CodePen will know what you mean.
If you do include the file extension, CodePen will always honor that.
Dependencies!
In a loose sense of the word dependency, you can just link up CSS or JS from another Pen, use it in the new Pen, and that’s a dependency. But if you use preprocessors, you can create a “real” dependency. For instance, you can create one Pen where you define variables and mixins and stuff, link it up as an external resource in another Pen, and then and use those variables and mixins in that Pen (where they would otherwise fail/error).
In order to make use of this, the selected preprocessors need to match. SCSS and SCSS, Sass and Sass, LESS and LESS, or CoffeeScript and CoffeeScript. If there isn’t a match, the Pen used as an external resource will just preprocess itself before being included.
What does this mean?
Here’s an example. I can take a button style I set up in this Pen:
And use it in this mini layout I set up, with a slight variation on the button to remove the red line that was just there for testing:
Then I could create a variation on that layout with new fonts and colors just by linking up the button resource and the original layout as a resource as well.
This could be the beginning of a nice little design library with proper dependencies. Update that button style from that first Pen, and it will be updated across all three Pens. Pretty neat.
Creating a Custom Mixin Library
For you Sass users, you know we offer Compass – a robust set of CSS3 mixins. But perhaps you are a LESS user and want to create your own custom set of CSS3 mixins. Or you use either, and have a set of your own special mixins you like to make your authoring easier. Here’s a bunch of examples by Sacha Grief that would make sense to use that way.
With this new feature, you could create a single Pen with all these user mixins and use that as an external resource whenever needed.
Create Data for Use with JavaScript
This also makes it possible to create sets of data to use in your JavaScript. Could be anything, but likely a big ol’ chunk of JSON. No reason to need to look at that while authoring the code that uses it.
Probably the easiest way would be create a variable that is a JSON blob and just link that Pen up as an external resource. If you really need to Ajax for the JSON, you can, you just need to link to the js from the s.codepen.io subdomain. Here is an example of that.
Third Party Assets
You’ve always been able to link up third party CSS and JS, but now if that third party URL ends in one of the preprocessor extensions listed in the table above, we’ll attempt to preprocess it before including in the preview.
Who gets these features?
Everybody!
PRO users are able to use multiple external resources, so it’s extra-useful for them, but everyone can link up at least one CSS and one JS Pen as a resource.
Enjoy! And let us know what cool things you end up using this for.