Improve CSS compilation.

Move to using libsass via CSS::Sass, and stop using compass, supplying
any used mixins directly. This removes the need for any ruby/gem based
installation, and greatly increases the speed of compilation. make_css
is also enhanced, bringing in the file monitoring previously done by a
separate script and improving its dependency monitoring.

43 files changed, 90 insertions, 460 deletions

diff --git a/web/cobrands/angus/base.scss b/web/cobrands/angus/base.scss
index 54e9b25b3..98b25f59e 100644
--- a/web/cobrands/angus/base.scss
+++ b/web/cobrands/angus/base.scss
@@ -2,7 +2,6 @@
 @import "./_colours";
 @import "./_fonts";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
@@ -61,4 +60,4 @@ label[for=pc] {
     margin: 0 0.3em 0 0.2em;
     border-radius: 100%;
     vertical-align: -2px;
-}
\ No newline at end of file
+}
diff --git a/web/cobrands/angus/config.rb b/web/cobrands/angus/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/angus/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/arreglamibarrio/base.scss b/web/cobrands/arreglamibarrio/base.scss
index 28fc5a940..d85ff1b85 100644
--- a/web/cobrands/arreglamibarrio/base.scss
+++ b/web/cobrands/arreglamibarrio/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
diff --git a/web/cobrands/arreglamibarrio/config.rb b/web/cobrands/arreglamibarrio/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/arreglamibarrio/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 418958ab1..9f7c0e9ae 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -2,7 +2,6 @@
 @import "./_colours";
 @import "./_fonts";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
diff --git a/web/cobrands/bromley/config.rb b/web/cobrands/bromley/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/bromley/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/default/base.scss b/web/cobrands/default/base.scss
index 9fccf92db..84784d552 100644
--- a/web/cobrands/default/base.scss
+++ b/web/cobrands/default/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
diff --git a/web/cobrands/default/config.rb b/web/cobrands/default/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/default/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/eastsussex/base.scss b/web/cobrands/eastsussex/base.scss
index 1394d397f..d2489f1b0 100644
--- a/web/cobrands/eastsussex/base.scss
+++ b/web/cobrands/eastsussex/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 $heading-font: Arial, "Helvetica Neue", Helvetica, sans-serif !default;
 
diff --git a/web/cobrands/eastsussex/config.rb b/web/cobrands/eastsussex/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/eastsussex/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/fiksgatami/base.scss b/web/cobrands/fiksgatami/base.scss
index 9fccf92db..84784d552 100644
--- a/web/cobrands/fiksgatami/base.scss
+++ b/web/cobrands/fiksgatami/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
diff --git a/web/cobrands/fiksgatami/config.rb b/web/cobrands/fiksgatami/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/fiksgatami/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/fixamingata/base.scss b/web/cobrands/fixamingata/base.scss
index 6b8add5d7..99d1e99db 100644
--- a/web/cobrands/fixamingata/base.scss
+++ b/web/cobrands/fixamingata/base.scss
@@ -9,12 +9,11 @@ $image-sprite: '/cobrands/fixamingata/images/sprite.png';
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
 #site-header {
-    @include background(linear-gradient(#000, #ccc 10%, #ccc 90%, #000));
+    @include linear-gradient(#000, #ccc 10%, #ccc 90%, #000);
 }
 
 #site-logo {
diff --git a/web/cobrands/fixamingata/config.rb b/web/cobrands/fixamingata/config.rb
deleted file mode 100644
index 471b4b008..000000000
--- a/web/cobrands/fixamingata/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
\ No newline at end of file
diff --git a/web/cobrands/fixmindelo/base.scss b/web/cobrands/fixmindelo/base.scss
index 9a8ca9021..5fa4bb2d1 100644
--- a/web/cobrands/fixmindelo/base.scss
+++ b/web/cobrands/fixmindelo/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 $image-sprite: 'images/sprite.png';
 
diff --git a/web/cobrands/fixmindelo/config.rb b/web/cobrands/fixmindelo/config.rb
deleted file mode 100644
index 471b4b008..000000000
--- a/web/cobrands/fixmindelo/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 223669b6d..8e52bc853 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -6,7 +6,6 @@
 
 @import "../sass/h5bp";
 @import "_colours";
-@import "compass";
 @import "../sass/base";
 
 .top_banner {
@@ -218,10 +217,10 @@
         background: rgba(255,255,255,0.3);
 
         input#sub {
-            @include background(linear-gradient(#49c0ff, #1091d5));
+            @include linear-gradient(#49c0ff, #1091d5);
 
             &:hover, &:focus {
-                @include background(linear-gradient(darken(#49c0ff, 10%), darken(#1091d5, 10%)));
+                @include linear-gradient(darken(#49c0ff, 10%), darken(#1091d5, 10%));
             }
         }
     }
diff --git a/web/cobrands/fixmystreet.com/config.rb b/web/cobrands/fixmystreet.com/config.rb
deleted file mode 100644
index 471b4b008..000000000
--- a/web/cobrands/fixmystreet.com/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 3802d96d7..99b801ed4 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -74,7 +74,7 @@ h3, h4,
 
 .nav-menu--main {
     a:hover {
-        @include background(linear-gradient(#000, #444 10%, #444 95%, #111));
+        @include linear-gradient(#000, #444 10%, #444 95%, #111);
     }
 }
 
@@ -88,7 +88,7 @@ h3, h4,
 body.mappage {
     .nav-wrapper {
         .nav-wrapper-2 {
-            @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
+            @include linear-gradient(#000, #222 10%, #222 90%, #000);
         }
     }
 }
diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss
index 69b9db052..dc85f5600 100644
--- a/web/cobrands/greenwich/base.scss
+++ b/web/cobrands/greenwich/base.scss
@@ -2,7 +2,6 @@
 @import "./_colours";
 @import "./_fonts";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
diff --git a/web/cobrands/greenwich/config.rb b/web/cobrands/greenwich/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/greenwich/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/harrogate/base.scss b/web/cobrands/harrogate/base.scss
index b546ae060..6c4a906f7 100644
--- a/web/cobrands/harrogate/base.scss
+++ b/web/cobrands/harrogate/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
diff --git a/web/cobrands/harrogate/config.rb b/web/cobrands/harrogate/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/harrogate/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/hart/base.scss b/web/cobrands/hart/base.scss
index 306098056..7f7f7bd35 100644
--- a/web/cobrands/hart/base.scss
+++ b/web/cobrands/hart/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
diff --git a/web/cobrands/hart/config.rb b/web/cobrands/hart/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/hart/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss
index 2f535e398..e7f80d14b 100644
--- a/web/cobrands/hart/hart.scss
+++ b/web/cobrands/hart/hart.scss
@@ -4,7 +4,7 @@
 
     */
 
-@import "compass";
+@import "../sass/mixins";
 @import "_colours";
 
 /* from http://nicolasgallagher.com/micro-clearfix-hack/ */
diff --git a/web/cobrands/oxfordshire/oxfordshire.scss b/web/cobrands/oxfordshire/_oxon.scss
index 46de1f22b..46de1f22b 100644
--- a/web/cobrands/oxfordshire/oxfordshire.scss
+++ b/web/cobrands/oxfordshire/_oxon.scss
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 8f28905e2..7d4809ecd 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
diff --git a/web/cobrands/oxfordshire/config.rb b/web/cobrands/oxfordshire/config.rb
deleted file mode 100644
index 471b4b008..000000000
--- a/web/cobrands/oxfordshire/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
\ No newline at end of file
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index d6c009019..0bd37b95f 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -400,4 +400,4 @@ input.green-btn{
     margin-right: 1em;
 }
 
-@import "oxfordshire";
+@import "oxon";
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index a8f6e7a96..2c8c90c6f 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -444,7 +444,7 @@ p.label-valid {
 #site-header{
   border-top: 0.25em solid $primary;
   height: 3em;
-  @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
+  @include linear-gradient(#000, #222 10%, #222 90%, #000);
   .container {
     min-height:4em;
   }
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 2f601775b..02dab82d8 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -1,4 +1,3 @@
-@import "compass";
 @import "_mixins";
 
 $image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default;
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index 541ff0a33..294b69c8a 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -16,12 +16,12 @@ $direction: 'left' !default;
   height: auto;
   @include border-radius(4px);
   background: $c1;
-  @include background (linear-gradient($c1, $c2)) ;
+  @include linear-gradient($c1, $c2);
   border:1px solid $c3;  
   color:$c4;
   &:hover:enabled {
     background:$c5;
-    @include background (linear-gradient($c6, $c5)); 
+    @include linear-gradient($c6, $c5);
     text-decoration: none;
     border:1px solid $c7;  
     color:$c8;
@@ -59,3 +59,76 @@ $right: right;
         @return $rtl;
     }
 }
+
+// Compass-like mixins
+
+@mixin box-sizing($bs) {
+  $bs: unquote($bs);
+  @include experimental(box-sizing, $bs, -moz, -webkit, not -o, not -ms, official);
+}
+
+@mixin border-radius($radius: 5px) {
+  @include experimental(border-radius, $radius, -moz, -webkit, not -o, not -ms, official);
+}
+
+@mixin box-shadow($shadow) {
+  @include experimental(box-shadow, $shadow, -moz, -webkit, not -o, not -ms, official);
+}
+
+@mixin experimental($property, $value, $moz: true, $webkit: true, $o: true, $ms: true, $official: true) {
+  @if $webkit   { -webkit-#{$property} : $value; }
+  @if $moz      {    -moz-#{$property} : $value; }
+  @if $ms       {     -ms-#{$property} : $value; }
+  @if $o        {      -o-#{$property} : $value; }
+  @if $official {         #{$property} : $value; }
+}
+
+@mixin inline-block($alignment: middle) {
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  zoom: 1;
+  *display: inline;
+}
+
+@mixin clearfix {
+  overflow: hidden;
+  *zoom: 1;
+}
+
+@mixin pie-clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  *zoom: 1;
+}
+
+@mixin linear-gradient($stops...) {
+  $webkit-gradient-stops: ();
+  $webkit-end-point: 100%;
+  @each $stop in $stops {
+    $pos: none;
+    @if length($stop) > 1 {
+      @if length($stops) == 2 && unit(nth($stop, 2)) == 'px' {
+        $webkit-end-point: nth($stop, 2);
+        $pos: 100%;
+      } @else {
+        $pos: nth($stop, 2);
+      }
+    } @else if (length($stop) == 1 && index($stops, $stop) == 1) {
+      $pos: 0%;
+    } @else {
+      $pos: 100%;
+    }
+    $webkit-gradient-stops: append($webkit-gradient-stops,
+                                   color-stop($pos, nth($stop, 1)),
+                                   comma);
+  }
+
+  background: -webkit-gradient(linear, 0% 0%, 0% $webkit-end-point, $webkit-gradient-stops);
+  @each $prefix in -moz-, -o-, -webkit-, "" {
+    background: #{$prefix}linear-gradient($stops);
+  }
+}
diff --git a/web/cobrands/stevenage/base.scss b/web/cobrands/stevenage/base.scss
index f17061356..134e97127 100644
--- a/web/cobrands/stevenage/base.scss
+++ b/web/cobrands/stevenage/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 $body-font: 'PTSansRegular', "PT Sans", Verdana, Arial, sans-serif;
 $meta-font: $body-font;
diff --git a/web/cobrands/stevenage/config.rb b/web/cobrands/stevenage/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/stevenage/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss
index 17ef6a4c3..48018e478 100644
--- a/web/cobrands/stevenage/layout.scss
+++ b/web/cobrands/stevenage/layout.scss
@@ -14,7 +14,7 @@
     padding-top: 0.75em;
     padding-bottom: 0.25em;
     background-color: #6b6969;
-    @include background(linear-gradient(#6b6969, #555454));
+    @include linear-gradient(#6b6969, #555454);
   }
 }
 
@@ -99,7 +99,7 @@ body.mappage {
             width: 29em;
             padding-top: 0.15em;
             z-index: 0;
-            @include background(linear-gradient(#6b6969, #555454));
+            @include linear-gradient(#6b6969, #555454);
         }
     }
 }
@@ -227,7 +227,7 @@ body.frontpage {
 
     .nav-wrapper {
         .nav-wrapper-2 {
-            @include background(linear-gradient(#222, #555 30%, #555 60%, #222));
+            @include linear-gradient(#222, #555 30%, #555 60%, #222);
         }
     }
     // f432a72d - moved sticky sidebars down a bit to account for the larger header
diff --git a/web/cobrands/trinidadtobago/base.scss b/web/cobrands/trinidadtobago/base.scss
index c171e8333..f1fa7d659 100644
--- a/web/cobrands/trinidadtobago/base.scss
+++ b/web/cobrands/trinidadtobago/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
diff --git a/web/cobrands/trinidadtobago/config.rb b/web/cobrands/trinidadtobago/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/trinidadtobago/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/warwickshire/base.scss b/web/cobrands/warwickshire/base.scss
index 682738a5e..0dcd85f53 100644
--- a/web/cobrands/warwickshire/base.scss
+++ b/web/cobrands/warwickshire/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
diff --git a/web/cobrands/warwickshire/config.rb b/web/cobrands/warwickshire/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/warwickshire/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/zurich/base.scss b/web/cobrands/zurich/base.scss
index e607f80a3..0308f5b43 100644
--- a/web/cobrands/zurich/base.scss
+++ b/web/cobrands/zurich/base.scss
@@ -1,7 +1,6 @@
 @import "../sass/h5bp";
 @import "./_colours";
 @import "../sass/mixins";
-@import "compass";
 
 @import "../sass/base";
 
@@ -128,7 +127,7 @@ h4.static-with-rule {
 
 .admin-nav {
     background: #f4f4f4;
-    @include background(linear-gradient(#fbfbfb, #efefef));
+    @include linear-gradient(#fbfbfb, #efefef);
     border-bottom: 2px solid $table_border_color;
     ul {
         overflow:auto;
diff --git a/web/cobrands/zurich/config.rb b/web/cobrands/zurich/config.rb
deleted file mode 100644
index cab97b18f..000000000
--- a/web/cobrands/zurich/config.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = ""
-sass_dir = ""
-images_dir = ""
-javascripts_dir = ""
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# 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
-
-line_comments = false # by Compass.app 
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index 3a20d05c5..3f24b3685 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -209,7 +209,7 @@ body.twothirdswidthpage {
         &#fixed {
             padding-top: 2em;
             background: $col_fixed_label;
-            @include background(linear-gradient(#769643, $col_fixed_label 4px));
+            @include linear-gradient(#769643, $col_fixed_label 4px);
         }
         &#closed {
             padding-top: 2em;
@@ -318,7 +318,7 @@ body.mappage.admin {
             margin: 2em 0;
 
             &:hover {
-                @include background(linear-gradient(#fcc, #daa 50%));
+                @include linear-gradient(#fcc, #daa 50%);
             };
         }
     }