We got a question from a member the other day about the project Typesettings, “a Sass & Stylus Type Toolkit”. Typesettings is on GitHub and it’s also available as an npm package. Because it’s on npm, CDN services like UNPKG make the files available to link to.

For example, this URL:

It’s totally understandable how you might think that would work on CodePen, linking it up as an external resource. In fact, we do allow you to link to external SCSS (and other preprocessors) files and we’ll process them together with your own SCSS so you can use them as dependencies.

So if that external SCSS file had $red: red; in it, you’d be able to use $red in your own SCSS on CodePen and it would work.

The trouble is… the @import statements. Those require Sass to be able to access the local file system to find and process those files. Those files do exist where you’d expect them to, but our Sass processor doesn’t have access to the file system on other domains like that.

Hope is not lost though… you can download the files and drag and drop the entire folder into a CodePen Project and use it just as you’d expect there!

Want to try it out? You can fork this Project.