Update to support the updated Vanilla Framework version and compile SASS

css/footer.css

 @charset "UTF-8";
-/**
- * Ubuntu Patterns Stylesheet
- *
- * The CSS file required by Ubuntu patterns page
- *
- * @project		Ubuntu Patterns
- * @author		Web Team at Canonical Ltd
- * @copyright	2012 Canonical Ltd
- *
- * @see 		http://design.ubuntu.com
- */
-/**
- * standard colors
- *
- * @colordef standard colors
- */
-/* assets database path */
-/* usage: background: url(//assets.ubuntu.com/sites/ubuntu/latest/u/img//backgrounds/background.jpg) no-repeat 0 0; */
-/* ubuntu orange (used for text links also on any site except canonical) */
-/* used as background on pre text */
-/* canonical aubergine */
-/* light aubergine (consumer) */
-/* mid aubergine (both) */
-/* dark aubergine (enterprise) */
-/* warm grey */
-/* cool grey */
-/* light grey */
-/* notifications */
-/* red */
-/* yellow */
-/* green */
-/* cyan */
-/* colour coded status - from negative to positive (Icon: canonical circle) */
-/* red, for status that require immediate attention */
-/* grey, for disabled status or ones that don’t require attention */
-/* yellow, for status that require attention */
-/* blue, for status that don’t require action */
-/* green, for positive status */
-/* misc colours */
-/* This is the global link color, mainly used for links in content */
-/* grid variables */
-/**
- * mixins
- *
- * @section mixins
- */
 /**
  * mixins
  *

sass/_constants.scss

@@ -5,4 +5,8 @@
 // Base font-size for the base em value.
 $em-base: 16 !default;
 
-$breakpoint-small: "only screen and (max-width: 768px)";
+$ubuntu-orange: $brand-color;
+
+$breakpoint-small-rule: "only screen and (max-width: 768px)";
+$breakpoint-medium-rule: "only screen and (min-width: #{$breakpoint-medium})";
+$breakpoint-large-rule: "only screen and (min-width: #{$breakpoint-large})";

sass/_mixins.scss

@@ -31,3 +31,15 @@
 		-ms-box-shadow: $shadow;
 			box-shadow: $shadow;
 }
+
+@mixin box-sizing ($type: border-box) {
+	-webkit-box-sizing : $type;
+	-moz-box-sizing    : $type;
+	box-sizing         : $type;
+}
+
+@mixin rounded-corners ($radius: 4px 4px 4px 4px) {
+	-webkit-border-radius : $radius;
+	-moz-border-radius    : $radius;
+	border-radius         : $radius;
+}

sass/core/patterns/_blockquotes.scss

@@ -83,7 +83,7 @@
   p { color: $white; }
 }
 
-&.quote-grey {
+.quote-grey {
   @include font-size (36);
   background: url("#{$asset-path}patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 $transparent;
   color: $white;
@@ -95,7 +95,7 @@
   width: 211px;
 }
 
-&.quote-bottom-left {
+.quote-bottom-left {
   background: url("#{$asset-path}patterns/quote-orange-bl-287x287.png") no-repeat;
   color: $white;
   height: 167px;

sass/footer.scss

@@ -144,7 +144,7 @@ footer.global {
 		border-top: 1px solid $nav-border-dark;
 	}
 
-	@media #{$breakpoint-small} {
+	@media #{$breakpoint-small-rule} {
 		overflow: hidden;
 		padding-top: 0;
 
@@ -379,7 +379,7 @@ html {
 }
 
 footer #nav-global {
-	@media #{$breakpoint-small} {
+	@media #{$breakpoint-small-rule} {
 		padding-top: 0;
 		margin-top: 0;
 	}
@@ -416,7 +416,7 @@ footer.global ul.inline li:after {
 	display: none;
 }
 
-@media #{$breakpoint-small} {
+@media #{$breakpoint-small-rule} {
 	footer.global {
 		.legal.has-cookie {
 			padding-bottom: 40px;
@@ -428,7 +428,7 @@ footer.global ul.inline li:after {
 	}
 }
 
-@media #{$breakpoint-medium} {
+@media #{$breakpoint-medium-rule} {
 	#livechat-compact-container,
 	#livechat-full,
 	#nav-global {
@@ -501,13 +501,13 @@ footer.global ul.inline li:after {
 	}
 }
 
-@media #{$breakpoint-small} {
+@media #{$breakpoint-small-rule} {
 	header.banner .search-toggle {
 		right: 48px;
 	}
 }
 
-@media #{$breakpoint-large} {
+@media #{$breakpoint-large-rule} {
 	footer.global {
 		padding-top: 40px;
 

sass/style.scss

@@ -145,7 +145,7 @@ header.banner {
 	}
 
 	.site-name {
-		@media #{$breakpoint-medium} {
+		@media #{$breakpoint-medium-rule} {
 			float:right;
 		}
 		.logo-ubuntuit {