Using Sass With Teams

Best practices for minimizing merge conflicts

Problem 1

Gem Version Conflicts

The Problem

  • Ruby Gems are installed locally outside the code base
  • Differing Ruby Gem versions will result in different CSS
  • Trying to manage different Ruby Gems accross different projects will lead to huge headaches later
  • It's difficult to get CI to build your Sass if the environment doesn't have the right Gem versions

The solution

Bundler provides a consistent environment for Ruby projects by tracking and installing the exact gems and versions that are needed. 

Bundler is an exit from dependency hell, and ensures that the gems you need are present in development, staging, and production. Starting work on a project is as simple as 'bundle install'.

Install Bundler

$ sudo gem install bundler

Build a Gemfile...

source "https://rubygems.org"
 
gem 'sass', "3.2.9"                #Exact version
gem 'sass-globbing', "~> 1.1.0"    #Get maintenance releases 1.1.x
gem 'compass'                      #But compass 1.0.1 requires Sass 3.1.3!
gem 'breakpoint',  ">= 2.0.5"      #Greater than
gem 'singularitygs', "< 2.0.0"     #Less than version

Even pull down from git...

http://bundler.io/v1.2/git.html

Install the Bundle and Exec

$ bundle install
...
$ bundle exec compass watch

This will generate a Gemfile.lock file. Both the Gemfile and Gemfile.lock should be committed.

source 'https://rubygems.org'

group :development do

  # Sass, Compass and extensions.
  gem 'singularitygs', '~>1.2.0' # Alternative to the Susy grid framework.
  gem 'singularity-extras', '~> 1.0.0.alpha.3'
  gem 'breakpoint'              # Manages CSS media queries.

  gem 'sass','3.3.8'         # Sass.
  gem 'sass-globbing'           # Import Sass files based on globbing pattern.
  gem 'compass', '1.0.0.alpha.19'                # Framework built on Sass.
  gem 'compass-validator'       # So you can `compass validate`.
  gem 'compass-normalize'       # Compass version of normalize.css.

  gem 'toolkit'                 # Compass utility from the fabulous Snugug.
  gem 'oily_png'                # Faster Compass sprite generation.
  gem 'css_parser'              # Helps `compass stats` output statistics.

  # Guard
  gem 'guard'                   # Guard event handler.
  gem 'guard-bundler'           # Auto install/update bundle when needed.
  gem 'guard-compass'           # Compile on sass/scss change.
  gem 'guard-shell'             # Run shell commands.
  gem 'guard-livereload'        # Browser reload.

  gem 'listen', '~> 1.1.0'     # Listens to file mods & notifies you of changes.
  gem 'yajl-ruby'                  # Faster JSON with LiveReload in the browser.


  # Dependency to prevent polling. Setup for multiple OS environments.
  # Optionally remove the lines not specific to your OS.
  # https://github.com/guard/guard#efficient-filesystem-handling
  gem 'rb-inotify', '~> 0.9', :require => false      # Linux
  gem 'rb-fsevent', :require => false                # Mac OSX
  gem 'rb-fchange', :require => false                # Windows

end

Problem 2

Conflicting Line Comments

The Problem

  • Sass line comments show full paths
  • Every developer's path will be different
  • Usually results in merge conflicts
  • Makes diffing or creating patches a pain

We can't expect devs to turn off

line comments on every commit...

Two Solutions

  • Have CI build your CSS on deployment
  • Use Source Maps

Source Maps

  • Available since Sass 3.3 and Compass 1.0.0.alpha.16
  • Source maps abstract the CSS to Sass/SCSS mappings
  • Works with your browser
  • Allows you to ignore these debug mappings in VCS
  • Now you can use and uglified CSS output format

Turn it on (if not already)

$ bundle exec compass compile
   create css/classy_panel_styles.css 
   create css/classy_panel_styles.css.map 
   create css/team-elements.css 
   create css/team-elements.css.map 
   create css/team-no-query.css 
   create css/team-no-query.css.map 
   create css/team-styles.css 
   create css/team-styles.css.map
$ bundle exec sass style.scss:style.css --sourcemap
config.rb...

sourcemap = true

Real Live Example!

Problem 3

The Cache Buster

The Problem

  • Using relative assets in Compass will result in URL's with a cache buster query on the end
  • This query is based on the file's date
  • Every dev will have a different file date resulting in a merge conflict
background:
    #e9e9e9
    url('../images/../../nfl_team_base/nfl_team_images/footer-nfl-divider.png?1407502479') 
    no-repeat 
    center 
    10px
;

The Solution

Just turn it off!

config.rb...

# Disable Cache Busting
asset_cache_buster :none

Questions?

Using Sass With Teams

By akoebbe

Made with Slides.com

Using Sass With Teams

  • 2,682

More from akoebbe