Tutorial
The premise is so simple you'll wonder why every IDE doesn't do this by default: for any line of CSS that includes a reference to a color, this will place a small dot of that color in the gutter next to the line numbers. If you work on Other People's Code, especially, this can save you a lot of pain tracking down nested overrides in Chrome's dev inspector.

You're really going to wish you'd done this sooner if you write a lot of front-end code. (Give it a shot even if you're new to terminal stuff). Quick OSX installation below; if you're on Windows or need a longer walkthrough, Wes Bos has a much more authoritative article on this here along with some troubleshooting advice in the comments.

Screenshot displaying gutter colors for a Drupal theme CSS file opened in Sublime Text.
Ooooooh. Shiny.

Step 1: Install The ImageMagick Library

This is simple with Homebrew. If you don’t have Homebrew installed, stop reading this and install it now. Seriously. It’s just one copy-paste you’re done. All the docs you’re going to read for stuff like this will assume you have Homebrew installed, which would be reason enough to grab it, but you should grab it anyway because it’s really, really useful.

If / once you have Homebrew installed, do:

$ brew install imagemagick

This got me imagemagick-6.9.5-4, though your version will differ based on what’s in the repos when you’re reading this. That’s it; just wait for it to finish running and you’re done. (If you’re new to using ruby package managers, don’t worry if it seems to do nothing for a long time; it takes a while to get moving.)

Step 2: Figure out where one particular file went.

You now need the path to one particular conversion script (which is part of the ImageMagick library you just installed): 

$ which convert

For me (currently running OSX El Capitan), this was “/usr/local/bin/convert” but use the “which” command to confirm yours before you set this up. For the configuration below, use your path if it’s different from mine. Terminal noobs: learning to use “which” is going to save you a lot of pain someday.

3: Sublime Text Configuration

Now you’re ready to add this to Sublime. For the installation, open Sublime Text, then:

  1. Command + Shift + P to get you to the command palette.
  2. Start typing "install" and select "Package Control: Install Package".
  3. Start typing "GutterColor" and select it for installation.

For the configuration:

  1. Find the settings override menu. It's in Sublime Text > Preferences > Package Settings > GutterColor > Preferences - User.
  2. That opens a config file. Add this to it and save the file: 
            {
        “convert_path” : “/usr/local/bin/convert”
        }

This seemed to work perfectly for me after one restart when testing on large Drupal theme CSS files, but occasionally failed on smaller test code that I just threw into a file and saved as CSS. Other commenters have suggested that it sometimes takes several restarts before this works.

Tags:
Tutorials