Merge branch 'move-to-libsass'

65 files changed, 297 insertions, 674 deletions

diff --git a/.gitignore b/.gitignore
index ca3180604..1e03cda7f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,7 @@ FixMyBarangay.po
 /web/css/core.css
 /web/css/main.css
 /web/cobrands/*/*.css
+/web/cobrands/*/*.css.map
 /web/cobrands/seesomething
 
 # Photo upload cache
diff --git a/Gemfile b/Gemfile
deleted file mode 100644
index eca052933..000000000
--- a/Gemfile
+++ /dev/null
@@ -1,3 +0,0 @@
-source "https://rubygems.org"
-
-gem "compass", "0.12.7"
diff --git a/Gemfile.lock b/Gemfile.lock
deleted file mode 100644
index c86a5ca9a..000000000
--- a/Gemfile.lock
+++ /dev/null
@@ -1,16 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    chunky_png (1.3.3)
-    compass (0.12.7)
-      chunky_png (~> 1.2)
-      fssm (>= 0.2.7)
-      sass (~> 3.2.19)
-    fssm (0.2.10)
-    sass (3.2.19)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  compass (= 0.12.7)
diff --git a/bin/install-as-user b/bin/install-as-user
index 297efc1f3..99eca0b82 100755
--- a/bin/install-as-user
+++ b/bin/install-as-user
@@ -71,32 +71,6 @@ if [ ! "$DEVELOPMENT_INSTALL" = true ]; then
     echo $DONE_MSG
 fi
 
-# Install the compass gem locally - it's required for generating the
-# CSS. Don't trust the bundled bundler in e.g. precise.
-echo "Setting up CSS... "
-gem1.9.1 install --user-install --no-ri --no-rdoc bundler
-FMS_GEMPATH="$DIRECTORY/gem-bin"
-FMS_GEMPATH="$FMS_GEMPATH:$(ruby1.9.1 -rubygems -e 'puts Gem.user_dir')/bin"
-export PATH="$FMS_GEMPATH:$PATH"
-
-if ! grep -q 'Set up local PATH for FixMyStreet' $HOME/.bashrc; then
-    cat >>$HOME/.bashrc <<EOBRC
-
-# Set up local PATH for FixMyStreet
-export PATH="$FMS_GEMPATH:\$PATH"
-EOBRC
-fi
-
-bundle install --deployment --path "$DIRECTORY/gems" --binstubs "$DIRECTORY/gem-bin"
-
-# Use compass to generate the CSS, if it doesn't seem to already
-# exist:
-if [ ! -f web/cobrands/default/base.css ]
-then
-    bin/make_css
-fi
-echo $DONE_MSG
-
 # Write sensible values into the config file, if it doesn't already exist
 if [ ! -f conf/general.yml ]; then
     echo -n "Setting up default conf/general.yml file... "
@@ -117,6 +91,13 @@ cd "$REPOSITORY"
 bin/install_perl_modules
 echo $DONE_MSG
 
+echo "Setting up CSS... "
+if [ ! -f web/cobrands/default/base.css ]
+then
+    bin/make_css
+fi
+echo $DONE_MSG
+
 # Create the database if it doesn't exist:
 echo -n "Setting up database... "
 if ! psql -l | egrep "^ *$DB_NAME *\|" > /dev/null
diff --git a/bin/make_css b/bin/make_css
index 87126ef28..29f2e8523 100755
--- a/bin/make_css
+++ b/bin/make_css
@@ -1,31 +1,137 @@
-#!/bin/bash
-#
-# make_css:
-# Generate CSS files from SCSS files.
-#
-# Requires sass which you can get from http://sass-lang.com/
-# FixMyStreet cobrand requires compass
-#
-# Copyright (c) 2012 UK Citizens Online Democracy. All rights reserved.
-# Email: matthew@mysociety.org. WWW: http://www.mysociety.org
-
-COMPASS=compass
-SASS=sass
-DIR=$(cd "$(dirname "$0")" >/dev/null && pwd -P)
-PARENT=$(cd "$DIR"/../.. >/dev/null && pwd)
-if [ -f "$PARENT/gem-bin/compass" ]; then
-    COMPASS=$PARENT/gem-bin/compass
-    SASS=$PARENT/gem-bin/sass
-fi
-
-DIRECTORY=$(cd "$DIR"/../web >/dev/null && pwd)
-
-DIRS=${@:-`find -L $DIRECTORY -name "*.scss" -exec dirname {} \; | uniq`}
-
-for dir in $DIRS; do
-    if [ -e "$dir/config.rb" ]; then
-        $COMPASS compile --output-style compressed $dir
-    else
-        $SASS --scss --update --style compressed $dir
-    fi
-done
+#!/usr/bin/env perl
+
+use strict;
+use warnings;
+use feature 'say';
+
+BEGIN {
+    use File::Basename qw(dirname);
+    use File::Spec;
+    my $d = dirname(File::Spec->rel2abs($0));
+    require "$d/../setenv.pl";
+}
+
+use CSS::Sass;
+use File::ChangeNotify;
+use File::Find::Rule;
+use File::Slurp;
+use Getopt::Long;
+use Path::Tiny;
+use Pod::Usage;
+
+# Store ARGV in case we need to restart later.
+my @ARGVorig = @ARGV;
+
+GetOptions(
+    'verbose' => \my $verbose,
+    'watch' => \my $watch,
+    'help|?' => \my $help,
+) or pod2usage(2);
+pod2usage(1) if $help;
+
+my $sass = CSS::Sass->new(
+    output_style => SASS_STYLE_COMPRESSED,
+    dont_die => 1,
+);
+
+# Get directories from the command line, defaulting to 'web' if none.
+# We need absolute paths so that the include files lookup works.
+my @dirs = map { m{/} ? $_ : "web/cobrands/$_" } @ARGV;
+@dirs = 'web' unless @dirs;
+@dirs = map { path($_)->absolute->stringify } @dirs;
+
+# Initial compilation, to also discover all the included files.
+my %includes;
+my %include_to_main;
+foreach my $file (File::Find::Rule->file->name(qr/^[^_].*\.scss$/)->in(@dirs)) {
+    my @includes = compile($file, $verbose);
+    $includes{$file} = \@includes;
+    map { push @{$include_to_main{$_}}, $file } @includes ? @includes : $file;
+}
+
+# If we're not watching, we're done!
+exit unless $watch;
+
+my $watcher = File::ChangeNotify->instantiate_watcher(
+    directories => [ @dirs, keys %include_to_main ],
+    filter => qr/\.scss$/,
+);
+
+say "\033[34mWatching for changes\033[0m";
+
+while ( my @events = $watcher->wait_for_events() ) {
+    for my $file (map { $_->path } @events) {
+        verbose($file, "%s was updated");
+        for my $inc (@{$include_to_main{$file}}) {
+            my @includes = compile($inc, 1);
+            # From CSS::Sass::Watchdog test, we see includes are sorted
+            if (@includes && @{$includes{$inc}} && "@{$includes{$inc}}" ne "@includes") {
+                say "\033[34mRestarting to update includes\033[0m";
+                exec( $^X, $0, @ARGVorig ) or die "Can't re-exec myself($^X,$0): $!\n";
+            }
+        }
+    }
+}
+
+# Given a SCSS file, compile it and generate a .map file,
+# show an error if any, and return the list of includes.
+sub compile {
+    my ($file, $verbose) = @_;
+    (my $output_file = $file) =~ s/scss$/css/;
+    my $source_map_file = "$output_file.map";
+
+    $sass->options->{source_map_file} = $source_map_file;
+    my ($css, $stats) = $sass->compile_file($file);
+    unless ($css) {
+        warn "\033[31m" . $sass->last_error . "\033[0m";;
+        return;
+    }
+
+    my $written = write_if_different($output_file, $css);
+    if ($written) {
+        verbose($file, "    \033[32mupdated\033[0m %s");
+    } elsif ($verbose) {
+        verbose($file, "  \033[33munchanged\033[0m %s");
+    }
+    write_if_different($source_map_file, $stats->{source_map_string});
+    return @{$stats->{included_files} || []};
+}
+
+# Write a file, only if it has changed.
+sub write_if_different {
+    my ($fn, $data) = @_;
+    my $current = File::Slurp::read_file($fn, { binmode => ':utf8', err_mode => 'quiet' });
+    if (!$current || $current ne $data) {
+        File::Slurp::write_file($fn, { binmode => ':utf8' }, $data);
+        return 1;
+    }
+    return 0;
+}
+
+sub verbose {
+    my ($file, $format) = @_;
+    # Strip most of file path, keep dir/file
+    (my $pr = $file) =~ s{.*/(.*/.*)\.scss}{$1};
+    say sprintf $format, $pr;
+}
+
+__END__
+
+=head1 NAME
+
+make_css - Generate CSS files from SCSS files, watch for changes.
+
+=head1 SYNOPSIS
+
+make_css [options] [dirs ...]
+
+ Options:
+   --verbose        display more information
+   --watch          wait for file updates and compile automatically
+   --help           this help message
+
+If no directories are specified, any .scss files under web/ that do not begin
+with a "_" will be processed. "web/cobrands/" may be omitted from a given
+directory.
+
+=cut
diff --git a/bin/make_css_watch b/bin/make_css_watch
deleted file mode 100755
index d15fa3a81..000000000
--- a/bin/make_css_watch
+++ /dev/null
@@ -1,97 +0,0 @@
-#!/usr/bin/env perl
-
-use strict;
-use warnings;
-use feature 'say';
-
-BEGIN {
-    use File::Basename qw(dirname);
-    use File::Spec;
-    my $d = dirname(File::Spec->rel2abs($0));
-    require "$d/../setenv.pl";
-}
-
-use Cwd qw(abs_path);
-use File::ChangeNotify;
-use File::Find::Rule;
-use FindBin;
-use Path::Tiny;
-
-my @exts = qw/
-    scss
-/;
-
-my @dirs = qw/
-    web
-/;
-
-my $filter = do {
-    my $exts = join '|', @exts;
-    qr/\.(?:$exts)$/
-};
-
-my $watcher = File::ChangeNotify->instantiate_watcher(
-    directories => \@dirs,
-    filter => $filter,
-);
-
-my $script_compass = 'compass';
-my $script_sass = 'sass';
-my $gem_bin = abs_path("$FindBin::Bin/../../gem-bin");
-if (-f "$gem_bin/compass") {
-    $script_compass = "$gem_bin/compass";
-    $script_sass = "$gem_bin/sass";
-}
-
-sub title {
-    my $what = shift;
-    print "\033]2;$what\007\n";
-}
-
-say sprintf "Watching [%s] for %s", (join ',' => @dirs), $filter;
-title 'watching';
-
-while ( my @events = $watcher->wait_for_events() ) {
-    my %seen;
-    my @update_dirs;
-    title 'updating';
-    for my $event (@events) {
-        my $file = path( $event->path );
-        say "$file was updated...";
-        my $dir = $file->dirname;
-        next if $seen{$dir}++;
-
-        if ($dir eq 'web/cobrands/sass/') {
-            # contains only partials, so we don't need to update
-            # this directory, but we *do* need to update everything else
-            push @update_dirs, 
-                grep {
-                    ! ($seen{$_}++)
-                }
-                map {
-                    path($_)->dirname
-                }
-                File::Find::Rule->file->name($filter)->in( @dirs );
-        }
-        else {
-            push @update_dirs, $dir;
-        }
-    }
-    for my $dir (@update_dirs) {
-        if (-e "$dir/config.rb") {
-            system $script_compass,
-                'compile',
-                '--output-style' => 'compressed',
-                $dir;
-        }
-        else {
-            system $script_sass,
-                '--scss',
-                '--update',
-                '--style' => 'compressed',
-                $dir;
-        }
-        title "$dir updated";
-    }
-    title 'watching';
-}
diff --git a/conf/packages b/conf/packages
index de2207f98..bd5ec0785 100644
--- a/conf/packages
+++ b/conf/packages
@@ -3,6 +3,7 @@
 # mailing list if you want to change it.
 
 make
+g++
 jhead
 liblocale-gettext-perl
 libsoap-lite-perl
@@ -11,7 +12,6 @@ perl
 perlmagick
 libmath-bigint-gmp-perl
 gettext
-ruby-compass
 postgresql-server-dev-9.1 | postgresql-server-dev-8.4
 gnuplot
 ttf-bitstream-vera
diff --git a/conf/packages.debian-squeeze b/conf/packages.debian-squeeze
index c2f1f3f68..4f820ed01 100644
--- a/conf/packages.debian-squeeze
+++ b/conf/packages.debian-squeeze
@@ -1,4 +1,5 @@
 make
+g++
 jhead
 liblocale-gettext-perl
 memcached
@@ -6,7 +7,6 @@ perl
 perlmagick
 libmath-bigint-gmp-perl
 gettext
-ruby1.9.1
 postgresql
 postgresql-server-dev-8.4
 gnuplot
diff --git a/conf/packages.debian-wheezy b/conf/packages.debian-wheezy
index ef6921142..a0cd9fa16 100644
--- a/conf/packages.debian-wheezy
+++ b/conf/packages.debian-wheezy
@@ -1,4 +1,5 @@
 make
+g++
 jhead
 liblocale-gettext-perl
 memcached
@@ -6,7 +7,6 @@ perl
 perlmagick
 libmath-bigint-gmp-perl
 gettext
-ruby1.9.1
 postgresql
 postgresql-server-dev-all
 gnuplot
diff --git a/conf/packages.ubuntu-precise b/conf/packages.ubuntu-precise
index ef6921142..a0cd9fa16 100644
--- a/conf/packages.ubuntu-precise
+++ b/conf/packages.ubuntu-precise
@@ -1,4 +1,5 @@
 make
+g++
 jhead
 liblocale-gettext-perl
 memcached
@@ -6,7 +7,6 @@ perl
 perlmagick
 libmath-bigint-gmp-perl
 gettext
-ruby1.9.1
 postgresql
 postgresql-server-dev-all
 gnuplot
diff --git a/cpanfile b/cpanfile
index c8ed8a771..890cac380 100644
--- a/cpanfile
+++ b/cpanfile
@@ -117,7 +117,8 @@ feature 'zurich', 'Zueri wie neu specific requirements' => sub {
 # Moderation by from_body user
 requires 'Algorithm::Diff';
 
-# Modules used by css watcher
+# Modules used by CSS & watcher
+requires 'CSS::Sass';
 requires 'File::ChangeNotify';
 requires 'Path::Tiny';
 requires 'File::Find::Rule';
diff --git a/cpanfile.snapshot b/cpanfile.snapshot
index 591f3fcbd..c391e67ce 100644
--- a/cpanfile.snapshot
+++ b/cpanfile.snapshot
@@ -172,6 +172,37 @@ DISTRIBUTIONS
       strict 0
       vars 0
       warnings 0
+  CSS-Sass-3.3.3
+    pathname: O/OC/OCBNET/CSS-Sass-3.3.3.tar.gz
+    provides:
+      CSS::Sass 3.003003
+      CSS::Sass::Value 3.003003
+      CSS::Sass::Value::Boolean 3.003003
+      CSS::Sass::Value::Color 3.003003
+      CSS::Sass::Value::Error 3.003003
+      CSS::Sass::Value::List 3.003003
+      CSS::Sass::Value::List::Comma 3.003003
+      CSS::Sass::Value::List::Space 3.003003
+      CSS::Sass::Value::Map 3.003003
+      CSS::Sass::Value::Null 3.003003
+      CSS::Sass::Value::Number 3.003003
+      CSS::Sass::Value::String 3.003003
+      CSS::Sass::Value::String::Constant 3.003003
+      CSS::Sass::Value::String::Quoted 3.003003
+      CSS::Sass::Watchdog 3.003003
+      CSS::Sass::Watchdog::Queue 3.003003
+    requirements:
+      Carp 1.01
+      Encode::Locale 0.01
+      ExtUtils::CppGuess 0.09
+      ExtUtils::MakeMaker 6.52
+      File::Slurp 0.01
+      Getopt::Long 0.01
+      List::MoreUtils 0.01
+      perl 5.008
+      strict 0
+      version 0
+      warnings 0
   Cache-Memcached-1.30
     pathname: D/DO/DORMANDO/Cache-Memcached-1.30.tar.gz
     provides:
@@ -193,6 +224,19 @@ DISTRIBUTIONS
       ExtUtils::MakeMaker 0
       IPC::Open3 1.0103
       Test::More 0
+  Capture-Tiny-0.40
+    pathname: D/DA/DAGOLDEN/Capture-Tiny-0.40.tar.gz
+    provides:
+      Capture::Tiny 0.40
+    requirements:
+      Carp 0
+      Exporter 0
+      ExtUtils::MakeMaker 6.17
+      File::Spec 0
+      File::Temp 0
+      IO::Handle 0
+      Scalar::Util 0
+      perl 5.006
       strict 0
       warnings 0
   Carp-Assert-0.20
@@ -2774,6 +2818,14 @@ DISTRIBUTIONS
       ExtUtils::MakeMaker 6.30
       strict 0
       warnings 0
+  ExtUtils-CppGuess-0.11
+    pathname: D/DA/DAVIDO/ExtUtils-CppGuess-0.11.tar.gz
+    provides:
+      ExtUtils::CppGuess 0.11
+    requirements:
+      Capture::Tiny 0
+      ExtUtils::MakeMaker 0
+      File::Basename 0
   ExtUtils-Helpers-0.022
     pathname: L/LE/LEONT/ExtUtils-Helpers-0.022.tar.gz
     provides:
diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
index c079b9ebd..aaa167108 100644
--- a/templates/web/base/report/_main.html
+++ b/templates/web/base/report/_main.html
@@ -1,6 +1,6 @@
 [% moderating = c.user && c.user.has_permission_to('moderate', problem.bodies_str) %]
 
-<div class="problem-header cf" problem-id="[% problem.id %]">
+<div class="problem-header clearfix" problem-id="[% problem.id %]">
 
   [% IF moderating %]
     [% original = problem_original %]
diff --git a/templates/web/base/report/update-form.html b/templates/web/base/report/update-form.html
index 29529e5a1..f6ce265bf 100644
--- a/templates/web/base/report/update-form.html
+++ b/templates/web/base/report/update-form.html
@@ -21,7 +21,7 @@
           [% END %]
           [% IF c.user_exists %]
             [% INCLUDE 'report/update/form_name.html' %]
-            <div class="cf"><input class="final-submit green-btn" type="submit" id="update_post" value="[% loc('Post') %]"></div>
+            <div class="clearfix"><input class="final-submit green-btn" type="submit" id="update_post" value="[% loc('Post') %]"></div>
           [% ELSIF oauth_need_email %]
             [% INCLUDE 'report/update/form_user_loggedout_email.html' required = 1 %]
             <div id="form_sign_in">
diff --git a/templates/web/bromley/header_logo.html b/templates/web/bromley/header_logo.html
index 92ff771f9..8c49d9145 100644
--- a/templates/web/bromley/header_logo.html
+++ b/templates/web/bromley/header_logo.html
@@ -1,4 +1,4 @@
-    <div class="bromley-header cf">
+    <div class="bromley-header clearfix">
         <a href="http://www.bromley.gov.uk/" id="site-logo">[% site_name %]</a>
 
         <ul class="linear-links subtext float-right top-links">
diff --git a/templates/web/zurich/admin/report_edit-sdm.html b/templates/web/zurich/admin/report_edit-sdm.html
index a0ff1038d..63c6b5e6f 100644
--- a/templates/web/zurich/admin/report_edit-sdm.html
+++ b/templates/web/zurich/admin/report_edit-sdm.html
@@ -133,7 +133,7 @@
     </script>
 </p>
 
-<p class="cf screen-only">
+<p class="clearfix screen-only">
     <input style="float:left" type="submit" name="Submit changes" value="[% loc('Submit changes') %]" >
     <input style="float:right" type="submit" name="no_more_updates" value="[% loc('No further updates') %]">
 </p>
diff --git a/templates/web/zurich/report/_main.html b/templates/web/zurich/report/_main.html
index d80eeb9a4..34aa71590 100644
--- a/templates/web/zurich/report/_main.html
+++ b/templates/web/zurich/report/_main.html
@@ -1,4 +1,4 @@
-<div class="problem-header cf">
+<div class="problem-header clearfix">
     <h1>[% tprintf( loc('Reported in the %s category'), problem.category ) %]</h1>
     <p class="sub">
         [% prettify_dt( problem.created, 'zurich' ) %]
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/eastsussex/layout.scss b/web/cobrands/eastsussex/layout.scss
index d90a617f1..20be807a6 100644
--- a/web/cobrands/eastsussex/layout.scss
+++ b/web/cobrands/eastsussex/layout.scss
@@ -1,13 +1,6 @@
 @import "_colours";;
 @import "../sass/layout";
 
-/* from http://nicolasgallagher.com/micro-clearfix-hack/ */
-.clearfix:before,
-.clearfix:after { content: " "; display: table; }
-.clearfix:after { clear: both; }
-/* For IE 6/7 only */
-.clearfix { *zoom: 1; }
-
 #front-main {
     // Undo the top margin added in base.scss
     margin-top: 0;
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..366ebc451 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 {
@@ -74,7 +73,7 @@
 }
 
 .next-steps__step__cta {
-  @include pie-clearfix;
+  @include clearfix;
   padding-top: 0.4em; // extra padding between buttons and previous paragraph
 
   a {
@@ -98,7 +97,7 @@
 }
 
 .next-steps__step--goodies {
-  @include pie-clearfix;
+  @include clearfix;
 
   .goodies-preview {
     float: $right;
@@ -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%));
             }
         }
     }
@@ -287,7 +286,7 @@ $grid-breakpoint-sm: $mysoc-footer-breakpoint-sm;
   }
 
   .row {
-    @include clearfix();
+    @include clearfix;
     margin-left: $grid-gutter / -2;
     margin-right: $grid-gutter / -2;
   }
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/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss
index eff3f854e..a60313de3 100644
--- a/web/cobrands/greenwich/layout.scss
+++ b/web/cobrands/greenwich/layout.scss
@@ -5,13 +5,6 @@
 
 $fixed_page_width: 990px;
 
-/* from http://nicolasgallagher.com/micro-clearfix-hack/ */
-.clearfix:before, .clearfix:after { content: " "; display: table; }
-.clearfix:after { clear: both; }
-/* For IE 6/7 only */
-.clearfix { *zoom: 1; }
-
-
 #site-logo,
 .ie6 #site-logo,
 body.frontpage #site-logo,
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..ac833934d 100644
--- a/web/cobrands/hart/hart.scss
+++ b/web/cobrands/hart/hart.scss
@@ -4,17 +4,9 @@
 
     */
 
-@import "compass";
+@import "../sass/mixins";
 @import "_colours";
 
-/* from http://nicolasgallagher.com/micro-clearfix-hack/ */
-.clearfix:before,
-.clearfix:after { content: " "; display: table; }
-.clearfix:after { clear: both; }
-/* For IE 6/7 only */
-.clearfix { *zoom: 1; }
-
-
 // Taken from Bromley's form css
 input[type=text],
 input[type=password],
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/_dropzone.scss b/web/cobrands/sass/_dropzone.scss
index 8c482d0cf..3e5fc8058 100644
--- a/web/cobrands/sass/_dropzone.scss
+++ b/web/cobrands/sass/_dropzone.scss
@@ -9,7 +9,7 @@ $dropzone-background-color--awakened: mix($dropzone-link-color, $dropzone-backgr
 $dropzone-background-color--full: mix($dropzone-border-color--full, $dropzone-background-color, 10%);
 
 .dropzone {
-  @include clearfix();
+  @include clearfix;
   border: 0.125em solid $dropzone-border-color;
   background-color: $dropzone-background-color;
   border-radius: $dropzone-border-radius;
diff --git a/web/cobrands/sass/_h5bp.scss b/web/cobrands/sass/_h5bp.scss
index f2074532c..b41effa1b 100644
--- a/web/cobrands/sass/_h5bp.scss
+++ b/web/cobrands/sass/_h5bp.scss
@@ -247,11 +247,9 @@ td { vertical-align: top; }
 .invisible { visibility: hidden; }
 
 /* Contain floats: h5bp.com/q */
-/* mySociety change: rename to cf */
-.cf:before, .cf:after { content: ""; display: table; }
-.cf:after { clear: both; }
-.cf { *zoom: 1; }
-
+.clearfix:before, .clearfix:after { content: " "; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
 
 
 /* ==|== print styles =======================================================
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..71f9b95a3 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,68 @@ $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 {
+    &:before, &:after { content: " "; display: table; }
+    &:after { 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/_council_header_responsive.scss b/web/cobrands/stevenage/_council_header_responsive.scss
index 60885f65f..e65f097d9 100644
--- a/web/cobrands/stevenage/_council_header_responsive.scss
+++ b/web/cobrands/stevenage/_council_header_responsive.scss
@@ -30,7 +30,7 @@
 
   // Clear the floated search and "PARF" elements.
   .stv-inner {
-    @include clearfix();
+    @include clearfix;
   }
 
   // Menu items should be one sixth of menu width.
diff --git a/web/cobrands/stevenage/base.scss b/web/cobrands/stevenage/base.scss
index ba08815ae..2bccdc377 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 937485c69..f55ac0d15 100644
--- a/web/cobrands/stevenage/layout.scss
+++ b/web/cobrands/stevenage/layout.scss
@@ -11,7 +11,7 @@
     padding-top: 0.5em;
     padding-bottom: 0.25em;
     background-color: #6b6969;
-    @include background(linear-gradient(#6b6969, #555454));
+    @include linear-gradient(#6b6969, #555454);
 
     .iel8 & {
       background-color: #6b6969;
@@ -40,7 +40,7 @@
 }
 
 #main-nav {
-    @include clearfix();
+    @include clearfix;
     width: auto;
     max-width: 984px; // match the Stevenage header width
     float: none;
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%);
             };
         }
     }