Less, Sass, Scss

Css pre-processors are great. Variables alone make it great, but there is so much more to it. Here’s my notes:

Getting it working for development

On a Mac OSX 10.13

For scss/sass, install Compass

 
sudo gem update --system 
sudo gem install -n /usr/local/bin compass

Once you have a project with sass files, let’s say inside ~/Code/example.com/template for example,
you’ll need to make sure there’s a config.rb file inside the template folder. This tells compass you’ve got a project here and details how you want your sass to be processed.

# Set this to the root of your project or template files:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

# select your preferred output style here (can be overridden via the command line):
output_style = :compact

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

In this config example, we are storing our .scss files in the sass directory and we want it compiled and output to a css directory, and we also want to format the compiled css to be a bit smaller in size, so we specify compact formatting (with every rule on one line).

Now you should be able to watch your sass files for changes with this command:

cd ~/Code/example.com
compass watch template

Setting up a file watcher in PhpStorm

Preferences > Tools > File Watchers > Add New

Settings:

  • File Type: SCSS
  • scope: set up a scope – this tells the file watcher which files to actually watch. Set it to the directory containing your scss files.
    • Example /Users/beneb/Code/example.com/template/sass
  • Program: /usr/local/bin/compass
  • Arguments: compile $FileParentDir$

 

 

Uncategorized