Setting up Ruby, SASS, CSS-Burrito in webstorm

In notebook:
Article Notes
Created at:
2015-11-10
Updated:
2015-11-10
Tags:
css

1. Set up your own ruby installation

While Mac OS comes with a ruby installation, you don't have write permission to install new gems (SASS gem). It's better to have a local ruby installation to make sure you don't mess your system's ruby.

So:
  brew install rbenv ruby-build

# Add rbenv to bash so that it loads every time you open a terminal
echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
source ~/.bash_profile

# Install Ruby
rbenv install 2.2.3
rbenv global 2.2.3
ruby -v

2. Install sass and tell Webstorm to use it

​$ gem install sass​

in the Webstorm file watcher use this path for Sass:
~/.rbenv/versions/2.2.3/bin/sass 

3. Compile into your dist directory

In the File Watchers window:
  1. change the Arguments field for the new output directory ( --no-cache --update $FileName$:../../dist/stylesheets/$FileNameWithoutExtension$.css )
  2. change the Output paths to refresh field so Webstorm will notice the change (and trigger livereload, liveedit changes ( ../../dist/stylesheets/$FileNameWithoutExtension$.css )