CSS (Cascading Style Sheets) is a handy tool to separate the presentation from the content of your website -- you write the content, and the CSS controls the look and formatting. CSS is great for giving your website a custom look, but it can also become complicated to maintain.

The solution to this? CSS preprocessors.

(If you're new to CSS, you might want to stop here and check out some CSS basics. If you're already knee-deep in selectors, read on to learn how CSS preprocessors can streamline your styling.)

Example of LESS

CSS preprocessors are extensions to CSS that make it easier to manage your site's styles. They have features like reusable variables, selector nesting, and functions, which allow you to easily reuse styles and apply them to different selectors. Put simply, a CSS preprocessor is like a friendly robot that automatically handles all of the copying and pasting you used to have to do with your CSS.

A dropdown menu, containing three options: None, LESS, and Sass (SCSS Syntax), appears above the Publish button.

The two most popular CSS preprocessors are Sass and LESS, and they're both available today in the CSS Editor on WordPress.com and the Jetpack plugin for self-hosted blogs. To use either language for your Custom CSS, just change the Preprocessor option before you save, and your Sass or LESS will automatically be compiled into CSS when it's served to your site's visitors.

If you're not familiar with Sass or LESS, check out Getting Started with Sass or Using the LESS CSS Preprocessor for Smarter Style Sheets. You can ignore any instructions about installing the preprocessors or running them manually, since we handle that for you. Happy styling!