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.

We’ve made an improvement to the editor where braces now insert themselves in matching pairs. For instance, in CSS, type: header { and you’ll get header {} automatically (with the cursor in between the braces). This saves a keystroke (since you’ll need to close it for sure anyway), helps prevent errors (especially when using a preprocessor), and generally just feels nice.

This sort of worked before, but only when writing regular CSS or regular JS. Now it works consistently in SCSS, Less, Stylus, CoffeeScript, or whatever other mode you’re in.

Plus it’s not just braces, it’s quotes, brackets, and parentheses too. Examples:

var test = ""; // auto matching quotes

function() { } // auto matching parens and braces

var array = ["", ""]; // auto matching brackets and quotes
<div class=""> <!-- auto matching double quotes -->

<h1>That's that</h1> <!-- Single quotes DO NOT auto match in HTML, because that would be annoying -->
.header {
  /* auto matching braces */

.logo {
  background: url(""); /* auto matching parens and quotes */

All goes well, you won’t even notice, it’ll just feel nicer.