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

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.

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

• 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/

Usually no configuration is necessary.

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.

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 (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.