The CodePen Project Editor is designed to let you preprocess, postprocess, and bundle your files without any tooling setup on your part, so you can get started building with your favorite languages right away. There are a few different ways you can choose how your project is processed.
Choosing a processor by using a compatible file extension.
For most of our preprocessors, you can turn on processing for a file by giving it the appropriate file extension. The Project Editor will automatically generate a 'processed' version of the file for you.
These are the preprocessors that the Editor currently supports, and their file extensions.
|Sass (SCSS syntax)||.scss||CSS|
|Sass (indented syntax)||.sass||CSS|
For files that you do not want to get processed, prefix the file name with an underscore (_).
Sometimes, you may not want every file with a particular file extension to get processed. For example, a SCSS project may use partial files, or a Pug project may have files for includes. By prefixing the file name with an underscore, the Editor will know not to create a processed file for that file. These files will still be available to the preprocessor for imports & includes, they just won't get their own output file.
.processed. file, you should use that link in your HTML.
Choosing a processor in the Project Settings.
Some processors run on files without special file extensions, so you'll need to elect to use these in the Project Settings.
By switching this processor on, all of your files with the
.css extension will be run through autoprefixer, including the processed output from other CSS processors. For example, you can create SCSS files and also run autoprefixer on their resulting CSS.
Webpack and Babel
Generating minified files.
.processed.min. file that you can reference in your HTML.