Skip to content

Syntax Highlighting for SCSS in Vim

2011/02/26

I just found something cool. And by cool I mean nerdy.
It’s a plugin for Vim that provides syntax highlighting for SCSS.

Keep reading if your response to that sentence was something like
“Provides what for what?”

Otherwise, just grab the code here and get your stylesheet on.

For those still following along, SCSS is an acronym (what else?) for Sassy CSS. Sassy CSS is the main syntax in Sass. It was introduced in version 3 of the project. Sass is yet another acronym (YAA) for Syntactically Awesome Stylesheets… wait for it…

“An extension of CSS3!”

It adds “…nested rules, variables, mixins, …and more.” It’s free open source software and helps me write much more manageable CSS code (along with the Compass and Blueprint frameworks…)

This Vim plugin autodetects SCSS files, and makes them look much better in my terminal window. So far, I vastly prefer it to the syntax highlighting for SASS (predecessor of SCSS) that was included with the version of Vim in my development environment.

Get it here.

Installing the plugin is easy, and requires only 3 simple steps.
1. Clone the repository
2. Copy some files
3. Restart Vim (or load them manually.)

In a terminal on Linux or OSX, issue the following commands:
$mkdir -p ~/src
$ git clone https://github.com/cakebaker/scss-syntax.vim.git

On my system, the ~/.vim/syntax and ~/.vim/ftdetect paths did not exist.

I had to make them;
$ mkdir ~/.vim/syntax ~/.vim/ftdetect

Then I just made two filesystem links –
$ ln -s ~/src/scss-syntax.vim/syntax/scss.vim ~/.vim/syntax/
$ ln -s ~/src/scss-syntax.vim/ftdetect/scss.vim ~/.vim/ftdetect/

Use Vim to open the example file provided with the plugin:
$ vim ~/src/scss-syntax.vim/example.scss
and you should be greeted by a warm wave of colorful, readable stylesheet.

SCSS Vim Syntax Plugin in Action

Joy!

Manually loading a Vim plugin into an already running environment is easy. Just source the file (in Vim) with :source ~/.vim/syntax/scss.vim and you’re off to the races.

Have fun!

Advertisements

From → Programming

3 Comments
  1. I highly suggest you to install Vundle to manage your plugins instead of doing it manually like you did. Have a look at https://github.com/gmarik/vundle 🙂

    • seeflanigan permalink

      Vundle is great! It’s an on-again-off-again part of my toolchain; typically works out pretty well. For the sake of the post, I showed the longhand way to manage plugins since I believe it’s important to know how to accomplish a task before using a tool which automates it. Have you checked out tpope’s solution to vim plugin management (pathogen.vim)? I’ve had good success with that one too. At any rate, thank you for the tip and happy vimming!

  2. That’s an awesome find.

    As a useless note, the flag -p in “mkdir -p” comes in handy when you need to build a set of nested directories, if it’s just one directory it doesn’t do much. And you could group names to create various directories under the same route, like this: “mkdir ~/.vim/{syntax,ftdetect}”

    🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: