Breakpoint is a first-of-its-kind media query engine built to harness the power of Sass and Compass. Below are instructions for setting up Breakpoint

Breakpoint is a Sass plugin, so you're going to need both Sass. If you do not already it installed, please read Installing Sass and Compass Across All Platforms. Breakpoint 2.2.x requires Sass 3.3.0 or greater.

It is HIGHLY RECOMMENDED that you run all Sass and Compass commands through Bundler

If you are using CodeKit, you are going to need to both follow the above linked instructions to install the actual Sass and Compass gems, as well as tell CodeKit to use those gems. To do so, open up CodeKit's preferences, go to Languages, and click on Compass. There will be an "Advanced Compiler Settings" section. Under that section, switch to "Use the Compass executable at this path:" option; a popup should open inside of /usr/bin. From there, look for compass and select that. You will now be able to use Compass extensions with CodeKit. Your CodeKit Compass settings should now look like this:

BE AWARE that CodeKit and most other GUI compilers do not support Bundler and are therefore NOT RECOMMENDED

The preferred way to install and use Breakpoint is through Bundler. To do so, add the following to your Gemfile (Sass and Compass are provided to ensure the correct versions are used):

gem "breakpoint", "~>2.4.0"

Once you have done so, run bundle install to install your dependencies, and remember to run all of your compilation through bundle exec.

As of Breakpoint 2.2.0, you can also install Breakpoint through Bower as it no longer has any Ruby requirements and can be run as a Sass package as opposed to a Compass extension. To do so, run the following command:

bower install breakpoint-sass --save-dev

BE AWARE that while you can install Breakpoint through Bower, Breakpoint still only works with Sass compilers that have full compatibility with Sass 3.3.x and greater. You are also going to need to add the folder using Compass's add_import_path config option instead of the standard require.

If you already have a project made and you'd like to use Breakpoint with it, add the following to your config.rb file:

require 'breakpoint'

Then, add the following to your Sass file towards the top:

@import "breakpoint";

If you would like to take advantage of performance gains introduced in Breakpoint 2.4.0 through the use of Memoization, simply import Sassy Maps' Memo Module before you import Breakpoint @import "memo". Sassy Maps will be downloaded as a dependency for both the Compass extension and the Bower package and are available for immediate import with both.

If you are currently using Breakpoint 1.x, upgrading to Breakpoint 2.x is easy. Simply update your gem, and then before you start using Breakpoint, set $breakpoint-legacy-syntax: true;. In addition to this, we have removed the $media and $no-query options from the breakpoint mixin in favor of including them in the variables with the mixin instead. See the No Query section for more details.

If, for some reason, you'd like to stay on Breakpoint 1.x, you are going to need to install and configure Bundler. If you are going to be using Bundler, be sure to include all Compass Extensions and the versions you'd like to stay at in order to have them all available. Your Gemfile including Breakpoint could look something like the following:

gem 'breakpoint', '~>1.3'

Once you've set up your Gemfile, run bundle install to install the Gem versions and lock in the dependencies. Then, to compile your Sass, instead of running compass watch, you'd run bundle exec compass watch, which will run Compass Watch using only the gems that are locked in.