Vim Syntax File for SCSS (Sassy CSS)

Installation

I recommend to use a plugin manager like Vundle for the installation.

Vundle

Open your ~/.vimrc file and add the following line(s):

Plugin 'JulesWang/css.vim' " only necessary if your Vim version < 7.4
Plugin 'cakebaker/scss-syntax.vim'

Afterwards, run :PluginInstall in Vim.

Pathogen

git clone https://github.com/cakebaker/scss-syntax.vim ~/.vim/bundle/scss-syntax

Manual

• Download scss.vim
• Download css.vim (only necessary if your Vim version < 7.4)
• Copy the content of the folders to the respective folders in ~/.vim/

Configuration

Usually no configuration is necessary.

CSS3

For highlighting CSS elements, this plugin relies on css.vim that comes bundled with Vim. Unfortunately, it's support for CSS3 is only rudimentary. To avoid highlighting issues I recommend to install the vim-css3-syntax plugin.

Filetype

In some cases you might want to change the filetype from scss to scss.css, for example, if you want to use SnipMate's CSS snippets within your SCSS files. In this case, add the following line to your ~/.vimrc file:

au BufRead,BufNewFile *.scss set filetype=scss.css

Please be aware that this setting can cause problems with other plugins as mentioned in #41.

Function names starting with a keyword

Function names starting with a keyword (e.g. baseline-unit()) are not highlighted correctly by default. It can be fixed by adding the following line to your ~/.vimrc file:

autocmd FileType scss set iskeyword+=-

Please be aware that this setting also affects the behavior of the motion keys.