WordPress pro tip: Use LESS or Sass directly in the CSS editor

The option to use LESS or Sass in your WordPress CSS Tonight I have been tweaking my custom CSS and I noticed a rather cool setting. It turns out that you can write LESS or Sass directly into the CSS stylesheet editor that is available to WP.com users with a paid upgrade or to WP.org users via Automattic’s excellent Jetpack plugin.

The WordPress CSS editor is already very good, with syntax highlighting, tab support and lots of other nice touches. Through this window it is possible to radically overhaul the look and feel of your WP.com blog, and being able to use a CSS preprocessor here will really help keep things simple and nicely organised.

For example, by using variables you can simply define some colours at the top of your document and then adjust the colour scheme of your whole site. From that point forward you can change the entire scheme again simply by tweaking those variables. Variable alone should convince any designer that preprocessors might be worth looking into. Once you’ve learned about mixins, operations and functions too, the chances are you’ll never look back.

Personally, I picked LESS because it was easier for me to get started with. For WordPress purposes both languages start on a more equal footing, and more advanced users than me usually seem to prefer Sass. I don’t think there’s a ‘wrong’ choice here.

Further reading

Advertisements

One thought on “WordPress pro tip: Use LESS or Sass directly in the CSS editor

  1. Pingback: Some custom CSS to pimp your WordPress blog | halfblog.net

Comments are closed.