Using Sass With Teams
Best practices for minimizing merge conflicts
Gem Version Conflicts
- 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
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'.
$ 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...
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
Conflicting Line Comments
- 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...
- Have CI build your CSS on deployment
- Use 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!
The Cache Buster
- 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 ;
Just turn it off!
config.rb... # Disable Cache Busting asset_cache_buster :none
Using Sass With Teams