Merge ~twom/launchpad:sassy-css-transcribe-base into launchpad:master

[Tom Wardill]

Transcribe base css into SCSS

Used https://css2sass.herokuapp.com/ to transcribe the base css to SCSS, extracted some common variables from the single files.
Altered the combo.scss to just import the single base file to make SCSS module migration easier.

[Thiago F. Pappacena (pappacena)]

Ran it locally, and couldn't spot any visual problem.

LGTM.

review: Approve

diff --git a/lib/canonical/launchpad/icing/combo.scss b/lib/canonical/launchpad/icing/combo.scss
index 62afbfb..8ad09e9 100644
--- a/lib/canonical/launchpad/icing/combo.scss
+++ b/lib/canonical/launchpad/icing/combo.scss
@@ -18,11 +18,6 @@
 // Include our main stylesheets at the end so they
 // take precedence over the others.
 'css/base',
-'css/typography',
-'css/colours',
-'css/forms',
-'css/layout',
-'css/modifiers',
 // This shouldn't require the _index, but doesn't appear to be allowable
 // in this version of node-sass (v4.14.4)
 'css/components/_index';
diff --git a/lib/canonical/launchpad/icing/css/base.css b/lib/canonical/launchpad/icing/css/base.scss
 similarity index 58%
 rename from lib/canonical/launchpad/icing/css/base.css
 rename to lib/canonical/launchpad/icing/css/base.scss
index ded8b61..68bcce1 100644
--- a/lib/canonical/launchpad/icing/css/base.css
+++ b/lib/canonical/launchpad/icing/css/base.scss
@@ -1,497 +1,550 @@
+// This file the result of auto-converting base.css to scss.
+
 body {
     /* line-height is the same as the sprite height. */
     font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
     font-size: 12px;
     line-height: 18px;
     color: #333;
-    }
 
-body.private,
-body.public {
-    /* It must be obvious to the user that the context is private */
-    background-image: none;
+    &.private, &.public {
+      /* It must be obvious to the user that the context is private */
+      background-image: none;
     }
 
-body.private .private-disallow {
-    /* We want to disable/hide some actions on private artifacts */
-    display: none;
+    &.private .private-disallow {
+      /* We want to disable/hide some actions on private artifacts */
+      display: none;
     }
+  }
 
-.private-only {
+  .private-only {
     /* We want to only show some items on private artifacts */
     display: none;
-    }
+  }
 
-body.private .private-only {
+  body.private .private-only {
     /* We want to only show some items on private artifacts */
     display: block;
-    }
+  }
 
-hr {
+  hr {
     display: none;
-    }
+  }
 
-dt {
+  dt {
     margin-bottom: .3em;
     margin-top: 0.5em;
     font-weight: bold;
-    }
 
-dt dfn {
-    font-weight: bold;
+    dfn {
+      font-weight: bold;
     }
+  }
 
-dd {
+  dd {
     margin-bottom: .8em;
-    }
+  }
 
-dl.faq dd {
+  dl.faq dd {
     margin: 1em 0 2em 4em;
-    }
+  }
 
-.contributors dt strong {
+  .contributors dt strong {
     padding-left: 1em;
-    }
+  }
 
-ol {
+  ol {
     margin-left: 1.8em;
-    }
 
-ol li {
-    list-style: decimal outside;
+    li {
+      list-style: decimal outside;
     }
+  }
 
-li {
+  li {
     padding-bottom: .3em;
-    }
+  }
 
-ul.news,
-li.news {
+  ul.news, li.news {
     list-style-type: none;
     margin-bottom: 1em;
-    }
+  }
 
-ul.architecture,
-li.architecture {
+  ul.architecture, li.architecture {
     list-style-image: url(/@@/architecture);
-    }
+  }
 
-ul.build-success,
-li.build-success {
+  ul.build-success, li.build-success {
     list-style-image: url(/@@/build-success);
-    }
+  }
 
-ul.bug.remote,
-li.bug.remote {
+  ul.bug.remote, li.bug.remote {
     list-style-image: url(/@@/bug-remote);
-    }
+  }
 
-ul.language,
-li.language {
+  ul.language, li.language {
     list-style-image: url(/@@/language);
+
     /* Disable .language sprite. */
     background: inherit;
-    }
+  }
 
-ul.mail,
-li.mail {
+  ul.mail, li.mail {
     list-style-image: url(/@@/mail);
-    }
+  }
 
-ul.meeting,
-li.meeting {
+  ul.meeting, li.meeting {
     list-style-image: url(/@@/meeting);
-    }
+  }
 
-ul.rss,
-li.rss {
+  ul.rss, li.rss {
     list-style-image: url(/@@/rss);
-    }
+  }
 
-ul.translation,
-li.translation {
+  ul.translation, li.translation {
     list-style-image: url(/@@/translation);
-    }
+  }
 
-ul.webref,
-li.webref {
+  ul.webref, li.webref {
     list-style-image: url(/@@/link);
-    }
+  }
 
-ul.iconed {
-    list-style-type: none;
-    padding-left: 0 !important;
-    margin: 0 !important;
+  ul {
+    &.iconed {
+      list-style-type: none;
+      padding-left: 0 !important;
+      margin: 0 !important;
     }
 
-ul.buttons {
-    /* without !important, gets overridden by the '#maincontent ol' rule */
-    margin: 0.5em 0 0.5em 0 !important;
-    padding: 0 !important;
-    }
+    &.buttons {
+      /* without !important, gets overridden by the '#maincontent ol' rule */
+      margin: 0.5em 0 0.5em 0 !important;
+      padding: 0 !important;
 
-ul.buttons li {
-    display: inline;
-    margin: 0 0 0 0;
+      li {
+        display: inline;
+        margin: 0 0 0 0;
+      }
     }
+  }
 
-.bulleted {
+  .bulleted {
     margin-bottom: 0.5em;
-    }
 
-.bulleted li {
-    margin: 0 0 0 2em;
-    list-style-type: disc;
+    li {
+      margin: 0 0 0 2em;
+      list-style-type: disc;
     }
+  }
 
-.horizontal {
+  .horizontal {
     margin: 1em 0 0 0;
-    }
 
-.horizontal li {
-    display: inline;
-    padding: 0 1.5em 0 0;
+    li {
+      display: inline;
+      padding: 0 1.5em 0 0;
     }
+  }
 
-.subordinate {
+  .subordinate {
     margin-left: 2em;
-    }
+  }
 
-ol.subordinate {
+  ol.subordinate {
     margin-left: 4em;
-    }
+  }
 
-.two-column-list dl {
+  .two-column-list dl {
     width: 48%;
     float: left;
     display: inline;
     margin: 0 0.25em 0 0;
-    }
 
-.two-column-list dl:first-child dt,
-.two-column-list dl:first-child + dl dt {
-    margin-top: 0;
+    &:first-child {
+      dt, + dl dt {
+        margin-top: 0;
+      }
     }
+  }
 
-.three-column-list dl {
+  .three-column-list dl {
     width: 31%;
     float: left;
     display: inline;
     margin: 0 0.25em 0 0;
-    }
+  }
 
-.two-column-list li {
+  .two-column-list li {
     width: 48%;
     float: left;
     display: inline;
     margin: 0 0.25em 0 0;
-    }
+  }
 
-.three-column-list li {
+  .three-column-list li {
     width: 31%;
     float: left;
     display: inline;
     margin: 0 0.25em 0 0;
-    }
+  }
 
-.two-column-list:after,
-.three-column-list:after {
+  .two-column-list:after, .three-column-list:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
+  }
+
+  .two-column-list {
+    dl.unseen, li.unseen {
+      /* Keep the abilty to hide list entries. */
+      display: none;
     }
+  }
 
-.two-column-list dl.unseen,
-.two-column-list li.unseen,
-.three-column-list dl.unseen,
-.three-column-list li.unseen {
-    /* Keep the abilty to hide list entries. */
-    display: none;
+  .three-column-list {
+    dl.unseen, li.unseen {
+      /* Keep the abilty to hide list entries. */
+      display: none;
     }
+  }
 
-caption {
+  caption {
     caption-side: bottom;
     text-align: left;
-    }
+  }
 
-th {
+  th {
     text-align: right;
-    }
+    vertical-align: baseline;
+  }
 
-th,
-td {
+  td {
     vertical-align: baseline;
-    }
+  }
 
-.head th,
-thead th,
-tr.thead th {
+  .head th, thead th, tr.thead th {
     text-align: left;
     vertical-align: bottom;
-    }
+  }
 
-th.icon,
-td.icon {
+  th.icon, td.icon {
     vertical-align: top;
     white-space: nowrap;
     width: 1px;
-    }
+  }
 
-th.icon.left,
-td.icon.left {
+  th.icon.left, td.icon.left {
     padding-right: 0;
-    }
+  }
 
-th.icon.right,
-td.icon.right {
+  th.icon.right, td.icon.right {
     padding-left: 0;
-    }
+  }
 
-th.nowrap,
-td.nowrap {
+  th.nowrap, td.nowrap {
     white-space: nowrap;
-    }
+  }
 
-tfoot th,
-table.contributions th {
+  tfoot th, table.contributions th {
     text-align: left;
-    }
+  }
 
-tr.white {
-    background-color: #fff;
+  tr {
+    &.white {
+      background-color: #fff;
     }
 
-tr.shaded {
-    background-color: #f6f6f6;
+    &.shaded {
+      background-color: #f6f6f6;
     }
+  }
 
-table .amount,
-table .action-icons {
-    text-align: right;
+  table {
+    .amount, .action-icons {
+      text-align: right;
     }
 
-table.contributions th {
-    font-weight: normal;
-    }
+    &.contributions {
+      th {
+        font-weight: normal;
+      }
 
-table.contributions td {
-    vertical-align: middle;
-    width: 16px;
-    text-align: left;
+      td {
+        vertical-align: middle;
+        width: 16px;
+        text-align: left;
+      }
     }
 
-table.latest th,
-table.latest td {
-    padding-bottom: 2em;
+    &.latest {
+      th, td {
+        padding-bottom: 2em;
+      }
     }
 
-table.duplicate.listing * {
-    color: #999;
+    &.duplicate.listing * {
+      color: #999;
     }
+  }
 
-.table-actions:nth-child(2) {
-    /* text-align works because the <li> is also display:inline. */
-    text-align: right;
+  .table-actions {
+    &:nth-child(2) {
+      /* text-align works because the <li> is also display:inline. */
+      text-align: right;
     }
 
-.table-actions {
     margin: 1em 0 0 0;
-    }
 
-.table-actions li {
-    display: inline;
-    padding: 0 1.5em 0 0;
+    li {
+      display: inline;
+      padding: 0 1.5em 0 0;
     }
+  }
 
-table.compressed {
-    width: auto;
-    }
+  table {
+    &.compressed {
+      width: auto;
 
-table.compressed td {
-    padding: 0.25em 0.5em;
+      td {
+        padding: 0.25em 0.5em;
+      }
     }
 
-table.cozy-listing {
-    width: 20em;
-    background-color: #fff;
-    border: 1px solid #d2d2d2;
-    border-bottom: 1px solid #d2d2d2;
-    }
+    &.cozy-listing {
+      width: 20em;
+      background-color: #fff;
+      border: 1px solid #d2d2d2;
+      border-bottom: 1px solid #d2d2d2;
 
-table.cozy-listing td {
-    border: 1px #d2d2d2;
-    border-style: dotted none none none;
+      td {
+        border: 1px #d2d2d2;
+        border-style: dotted none none none;
+      }
     }
 
-table.sortable a.sortheader {
-    color: #666;
-    font-weight: bold;
-    text-decoration: none;
-    display: block;
-    }
+    &.sortable {
+      a.sortheader {
+        color: #666;
+        font-weight: bold;
+        text-decoration: none;
+        display: block;
+      }
 
-table.sortable img.sortarrow {
-    padding-left: 2px;
-    }
+      img.sortarrow {
+        padding-left: 2px;
+      }
 
-table.sortable th {
-    cursor: pointer;
+      th {
+        cursor: pointer;
+      }
     }
+  }
 
-th.ascending {
-    background-image: url(/@@/arrowDown);
-    background-position: center right;
-    background-repeat: no-repeat;
+  th {
+    &.ascending {
+      background-image: url(/@@/arrowDown);
+      background-position: center right;
+      background-repeat: no-repeat;
     }
 
-th.descending {
-    background-image: url(/@@/arrowUp);
-    background-position: center right;
-    background-repeat: no-repeat;
+    &.descending {
+      background-image: url(/@@/arrowUp);
+      background-position: center right;
+      background-repeat: no-repeat;
     }
+  }
 
-.sortkey,
-.revsortkey {
+  .sortkey, .revsortkey {
     /* Used to indicate a value to be used to sort cells in a row */
     display: none;
-    }
-
-table.listing {
-    margin: 0;
-    width: 100%;
-    }
-
-table.listing,
-table.listing tbody,
-table.listing td.end-of-section {
-    border-bottom: 1px solid #d2d2d2;
-    }
-
-table.listing th {
-    font-weight: bold;
-    }
-
-table.listing .head,
-table.listing .head th,
-table.listing thead,
-table.listing thead th,
-table.listing tfoot tr,
-table.listing tr.thead th {
-    border: 1px solid #d2d2d2;
-    background-color: #fff;
-    }
-
-table.listing tr.category {
-    border-bottom: 1px solid #999;
-    }
-
-table.listing tr.category th,
-table.listing tr.category td {
-    padding-top: 1em;
-    }
-
-table.listing thead td,
-table.listing table tbody,
-table.listing table thead,
-table.listing table thead th,
-table.listing tfoot tr,
-table.listing table tfoot td,
-table.listing table td {
-    border: none;
-    }
-
-table.listing tfoot td {
-    border: 1px solid #d2d2d2;
-    }
-
-table.listing th,
-table.listing td {
-    padding: 0.25em;
-    }
-
-table.listing table th,
-table.listing table td {
-    /* We don't want extra padding on nested tables, like batch navigation. */
-    padding: 0;
-    }
-
-table.listing thead th,
-table.listing tr.thead th {
-    white-space: nowrap;
-    }
-
-table.listing td {
-    border: 1px #d2d2d2;
-    border-style: dotted none none none;
-    }
-
-table.listing tr.category:first-child td {
-    border-top-style: none;
-    padding-top: 0;
-    }
-
-table.listing .section-break td {
-    border-width: 1px 0 0 0;
-    border-style: solid;
-    border-color: #d2d2d2;
-    height: 1em;
-    }
-
-table.listing .note td {
-    border-style: none;
-    }
-
-table.listing img {
-    vertical-align: middle;
-    }
-
-table.listing tr.secondary th,
-table.listing tr.secondary td {
-    border-top: none;
-    }
-
-table.listing table.simple {
-    margin-left: 2em;
-    }
-
-table.listing table.simple td {
-    padding: 0.25em;
-    }
-
-table.listing .section-heading {
-    border: none;
-    padding-top: 1.5em;
-    }
-
-table.summary th,
-table.summary td,
-table.listing table.summary th,
-table.listing table.summary td {
-    /* Summary tables havesubdued headers and a little row spacing. */
-    padding: 0 0.5em 0.5em 0;
-    }
-
-table.summary th {
-    font-weight: normal;
-    }
-
-table.summary caption {
-    font-style: italic;
-    margin-left: 1em;
-    }
-
-table.summary ul,
-table.summary ul li {
-    list-style-position: inside;
-    margin: 0;
-    padding: 0;
-    }
-
-.results {
+  }
+
+  table {
+    &.listing {
+      margin: 0;
+      width: 100%;
+      border-bottom: 1px solid #d2d2d2;
+
+      tbody, td.end-of-section {
+        border-bottom: 1px solid #d2d2d2;
+      }
+
+      th {
+        font-weight: bold;
+      }
+
+      .head, thead {
+        border: 1px solid #d2d2d2;
+        background-color: #fff;
+
+        th {
+          border: 1px solid #d2d2d2;
+          background-color: #fff;
+        }
+      }
+
+      tfoot tr {
+        border: 1px solid #d2d2d2;
+        background-color: #fff;
+      }
+
+      tr {
+        &.thead th {
+          border: 1px solid #d2d2d2;
+          background-color: #fff;
+        }
+
+        &.category {
+          border-bottom: 1px solid #999;
+
+          th, td {
+            padding-top: 1em;
+          }
+        }
+      }
+
+      thead td {
+        border: none;
+      }
+
+      table {
+        tbody {
+          border: none;
+        }
+
+        thead {
+          border: none;
+
+          th {
+            border: none;
+          }
+        }
+      }
+
+      tfoot tr {
+        border: none;
+      }
+
+      table {
+        tfoot td, td {
+          border: none;
+        }
+      }
+
+      tfoot td {
+        border: 1px solid #d2d2d2;
+      }
+
+      th, td {
+        padding: 0.25em;
+      }
+
+      table {
+        th, td {
+          /* We don't want extra padding on nested tables, like batch navigation. */
+          padding: 0;
+        }
+      }
+
+      thead th, tr.thead th {
+        white-space: nowrap;
+      }
+
+      td {
+        border: 1px #d2d2d2;
+        border-style: dotted none none none;
+      }
+
+      tr.category:first-child td {
+        border-top-style: none;
+        padding-top: 0;
+      }
+
+      .section-break td {
+        border-width: 1px 0 0 0;
+        border-style: solid;
+        border-color: #d2d2d2;
+        height: 1em;
+      }
+
+      .note td {
+        border-style: none;
+      }
+
+      img {
+        vertical-align: middle;
+      }
+
+      tr.secondary {
+        th, td {
+          border-top: none;
+        }
+      }
+
+      table.simple {
+        margin-left: 2em;
+
+        td {
+          padding: 0.25em;
+        }
+      }
+
+      .section-heading {
+        border: none;
+        padding-top: 1.5em;
+      }
+    }
+
+    &.summary {
+      th, td {
+        /* Summary tables havesubdued headers and a little row spacing. */
+        padding: 0 0.5em 0.5em 0;
+      }
+    }
+
+    &.listing table.summary {
+      th, td {
+        /* Summary tables havesubdued headers and a little row spacing. */
+        padding: 0 0.5em 0.5em 0;
+      }
+    }
+
+    &.summary {
+      th {
+        font-weight: normal;
+      }
+
+      caption {
+        font-style: italic;
+        margin-left: 1em;
+      }
+
+      ul {
+        list-style-position: inside;
+        margin: 0;
+        padding: 0;
+
+        li {
+          list-style-position: inside;
+          margin: 0;
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  .results {
     background-color: #f4f4f4;
     padding: 2px 10px 5px 10px;
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
-    }
+  }
+
+@import 'typography',
+        'colours',
+        'forms',
+        'layout',
+        'modifiers'
diff --git a/lib/canonical/launchpad/icing/css/colours.css b/lib/canonical/launchpad/icing/css/colours.css
 deleted file mode 100644
index e43f46d..0000000
--- a/lib/canonical/launchpad/icing/css/colours.css
+++ /dev/null
@@ -1,351 +0,0 @@
-
-
-.questionstatusOPEN {
-    color: #000;
-    }
-.questionstatusNEEDSINFO {
-    /* brown */
-    color: #930;
-    }
-.questionstatusANSWERED {
-    /* grey-green */
-    color: #363;
-    }
-.questionstatusSOLVED {
-    color: #090;
-    }
-.questionstatusEXPIRED {
-    color: #666;
-    }
-.questionstatusINVALID {
-    color: #c00;
-    }
-
-
-.specstatusAPPROVED, .specstatusAPPROVED a {
-    color: green;
-    }
-.specstatusPENDINGAPPROVAL, .specstatusPENDINGAPPROVAL a,
-.specstatusPENDINGREVIEW, .specstatusPENDINGREVIEW a {
-    color: #f09;
-    }
-.specstatusDRAFT, .specstatusDRAFT a,
-.specstatusDISCUSSION, .specstatusDISCUSSION a {
-    color: #930;
-    }
-.specstatusNEW, .specstatusNEW a {
-    color: red;
-    }
-.specstatusSUPERSEDED, .specstatusSUPERSEDED a,
-.specstatusOBSOLETE, .specstatusOBSOLETE a,
-.specpriorityNOTFORUS, .specpriorityNOTFORUS a,
-.specpriorityUNDEFINED, .specpriorityUNDEFINED a {
-    color: gray;
-    }
-.specpriorityLOW, .specpriorityLOW a {
-    color: black;
-    }
-.specpriorityMEDIUM, .specpriorityMEDIUM a {
-    color: #f60;
-    }
-.specpriorityHIGH, .specpriorityHIGH a,
-.specpriorityESSENTIAL, .specpriorityESSENTIAL a {
-    color: red;
-    }
-.specdeliveryUNKNOWN, .specdeliveryUNKNOWN a,
-.specdeliveryNOTSTARTED, .specdeliveryNOTSTARTED a {
-    color: gray;
-    }
-.specdeliveryDEFERRED, .specdeliveryDEFERRED a,
-.specdeliveryNEEDSINFRASTUCTURE, .specdeliveryNEEDSINFRASTUCTURE a,
-.specdeliveryBLOCKED, .specdeliveryBLOCKED a {
-    color: red;
-    }
-.specdeliverySTARTED, .specdeliverySTARTED a,
-.specdeliveryGOOD, .specdeliveryGOOD a {
-    color: blue;
-    }
-.specdeliverySLOW, .specdeliverySLOW a {
-    color: red;
-    }
-.specdeliveryBETA, .specdeliveryBETA a {
-    color: #f60;
-    }
-.specdeliveryNEEDSREVIEW, .specdeliveryNEEDSREVIEW a {
-    color: purple;
-    }
-.specdeliveryAWAITINGDEPLOYMENT, .specdeliveryAWAITINGDEPLOYMENT a {
-    color: red;
-    }
-.specdeliveryIMPLEMENTED, .specdeliveryIMPLEMENTED a,
-.specdeliveryINFORMATIONAL, .specdeliveryINFORMATIONAL a {
-    color: green;
-    }
-
-
-.bug-activity {
-    color: #555;
-    }
-.statusNEW, .statusNEW a {
-    color: #930;
-    }
-.statusINCOMPLETE, .statusINCOMPLETE a,
-.statusCONFIRMED, .statusCONFIRMED a {
-    color: red;
-    }
-.statusTRIAGED, .statusTRIAGED a {
-    color: #f60;
-    }
-.statusINPROGRESS, .statusINPROGRESS a {
-    color: black;
-    }
-.statusFIXCOMMITTED, .statusFIXCOMMITTED a {
-    color: #050;
-    }
-.statusFIXRELEASED, .statusFIXRELEASED a {
-    color: green;
-    }
-.statusINVALID, .statusINVALID a,
-.statusWONTFIX, .statusWONTFIX a,
-.statusOPINION, .statusOPINION a {
-    color: #555;
-    }
-.importanceCRITICAL, .importanceCRITICAL a {
-    color: red;
-    }
-.importanceHIGH, .importanceHIGH a {
-    color: #f60;
-    }
-.importanceMEDIUM, .importanceMEDIUM a {
-    color: green;
-    }
-.importanceLOW, .importanceLOW a {
-    color: black;
-    }
-.importanceWISHLIST, .importanceWISHLIST a {
-    color: blue;
-    }
-.importanceUNDECIDED, .importanceUNDECIDED a {
-    color: #999;
-    }
-#client-listing .statusUNKNOWN, #client-listing .statusUNKNOWN a,
-#client-listing .statusNEW, #client-listing .statusNEW a,
-#client-listing .statusINCOMPLETE, #client-listing .statusINCOMPLETE a {
-        color: #c63600;
-        background-color: #ffdabe;
-    }
-#client-listing .statusCONFIRMED, #client-listing .statusCONFIRMED a,
-#client-listing .statusTRIAGED, #client-listing .statusTRIAGED a {
-        color: #896e00;
-        background-color: #f4f1a4;
-    }
-#client-listing .statusINPROGRESS, #client-listing .statusINPROGRESS a,
-#client-listing .statusFIXCOMMITTED, #client-listing .statusFIXCOMMITTED a {
-        color: #137587;
-        background-color: #cbe7ef;
-    }
-#client-listing .statusFIXRELEASED, #client-listing .statusFIXRELEASED a {
-        color: #4f7b10;
-        background-color: #cef1a0;
-    }
-#client-listing .statusEXPIRED, #client-listing .statusEXPIRED a,
-#client-listing .statusINVALID, #client-listing .statusINVALID a,
-#client-listing .statusWONTFIX, #client-listing .statusWONTFIX a,
-#client-listing .statusOPINION, #client-listing .statusOPINION a {
-        color: #464646;
-        background-color: #ddd;
-    }
-#client-listing .importanceCRITICAL, #client-listing .importanceCRITICAL a {
-    background-color: #DF382C;
-    color: white;
-    }
-#client-listing .importanceHIGH, #client-listing .importanceHIGH a {
-    background-color: #EFB73E;
-    color: white;
-    }
-#client-listing .importanceMEDIUM, #client-listing .importanceMEDIUM a {
-    background-color: #19B6EE;
-    color: white;
-    }
-#client-listing .importanceLOW, #client-listing .importanceLOW a {
-    background-color: #38B44A;
-    color: white;
-    }
-#client-listing .importanceWISHLIST, #client-listing .importanceWISHLIST a {
-    background-color: #724dc8;
-    color: white;
-    }
-#client-listing .importanceUNDECIDED, #client-listing .importanceUNDECIDED a {
-    background-color: #666666;
-    color: white;
-    }
-
-a.official-tag {
-    /* Looks just like a normal link  */
-    }
-a.unofficial-tag {
-    color: #6699ee;
-    }
-
-
-
-.vcsimportSUCCESS {
-    /* inherited text color */
-    }
-.vcsimportFAILURE {
-    color: Red;
-    }
-.greylink a:link, .greylink a:visited {
-    color: gray;
-    }
-.stale-diff {
-    color: #f60;
-    }
-.conflicts-diff {
-    color: red;
-    }
-.branchstatusMATURE, .branchstatusMATURE a {
-    color: #090;
-    }
-.branchstatusDEVELOPMENT, .branchstatusDEVELOPMENT a {
-    color: #900;
-    }
-.branchstatusEXPERIMENTAL, .branchstatusEXPERIMENTAL a {
-    color: #930;
-    }
-.branchstatusMERGED, .branchstatusMERGED a,
-.branchstatusABANDONED, .branchstatusABANDONED a {
-    color: gray;
-    }
-.branchstatusNEW, .branchstatusNEW a {
-    color: black;
-    }
-.voteAPPROVE {
-    color: green;
-    }
-.voteNEEDS_FIXING {
-    color: #930;
-    }
-.voteDISAPPROVE,
-.voteRESUBMIT {
-    color: red;
-    }
-.voteABSTAIN {
-    color: #666;
-    }
-.votePENDING {
-    color: #f60;
-    }
-.mergestatusWORK_IN_PROGRESS, .mergestatusWORK_IN_PROGRESS a {
-    color: black;
-    }
-.mergestatusNEEDS_REVIEW, .mergestatusNEEDS_REVIEW a {
-    color: #f60;
-    }
-.mergestatusCODE_APPROVED, .mergestatusCODE_APPROVED a,
-.mergestatusMERGED, .mergestatusMERGED a {
-    color: green;
-    }
-.mergestatusREJECTED, .mergestatusREJECTED a,
-.mergestatusMERGE_FAILED, .mergestatusMERGE_FAILED a {
-    color: red;
-    }
-.mergestatusQUEUED, .mergestatusQUEUED a {
-    color: black;
-    }
-.mergestatusSUPERSEDED, .mergestatusSUPERSEDED a {
-    color: #666;
-    }
-.codeimportNEW {
-    color: #930;
-    }
-.codeimportREVIEWED {
-    color: green;
-    }
-.codeimportINVALID,
-.codeimportSUSPENDED,
-.codeimportFAILING {
-    color: red;
-    }
-
-
-.translationimportstatusAPPROVED,
-.translationimportstatusAPPROVED a {
-    color: #050;
-    }
-.translationimportstatusIMPORTED,
-.translationimportstatusIMPORTED a {
-    color: green;
-    }
-.translationimportstatusDELETED,
-.translationimportstatusDELETED a {
-    color: black;
-    }
-.translationimportstatusFAILED,
-.translationimportstatusFAILED a {
-    color: red;
-    }
-.translationimportstatusNEEDS_REVIEW,
-.translationimportstatusNEEDS_REVIEW a {
-    color: #f60;
-    }
-.translationimportstatusBLOCKED,
-.translationimportstatusBLOCKED a {
-    color: blue;
-    }
-.translationimportstatusNEEDS_INFORMATION,
-.translationimportstatusNEEDS_INFORMATION a {
-    color: maroon;
-    }
-.dismissed, .dismissed a {
-    color: #666;
-    }
-
-
-.distromirrorstatusUP,
-.distromirrorstatusONEHOURBEHIND,
-.distromirrorstatusTWOHOURSBEHIND,
-.distromirrorstatusFOURHOURSBEHIND,
-.distromirrorstatusSIXHOURSBEHIND {
-    color: green;
-    }
-.distromirrorstatusONEDAYBEHIND {
-    color: #f60;
-    }
-.distromirrorstatusTWODAYSBEHIND,
-.distromirrorstatusONEWEEKBEHIND {
-    color: red;
-    }
-.distromirrorstatusUNKNOWN {
-    color: #666;
-    }
-.buildstatusNEEDSBUILD {
-    color: gray;
-    }
-.buildstatusBUILDING {
-    color: black;
-    }
-.buildstatusFULLYBUILT {
-    color: green;
-    }
-.buildstatusFAILEDTOBUILD,
-.buildstatusMANUALDEPWAIT,
-.buildstatusCHROOTWAIT,
-.buildstatusSUPERSEDED,
-.buildstatusFAILEDTOUPLOAD {
-    color: red;
-    }
-
-
-.launchpad-gold {
-    color: #F8C300;
-    }
-
-
-.green {
-    color: green;
-}
-
-.red {
-    color: red;
-}
diff --git a/lib/canonical/launchpad/icing/css/colours.scss b/lib/canonical/launchpad/icing/css/colours.scss
 new file mode 100644
index 0000000..6b4c041
--- /dev/null
+++ b/lib/canonical/launchpad/icing/css/colours.scss
@@ -0,0 +1,633 @@
+.questionstatusOPEN {
+    color: #000;
+  }
+
+  .questionstatusNEEDSINFO {
+    /* brown */
+    color: #930;
+  }
+
+  .questionstatusANSWERED {
+    /* grey-green */
+    color: #363;
+  }
+
+  .questionstatusSOLVED {
+    color: #090;
+  }
+
+  .questionstatusEXPIRED {
+    color: #666;
+  }
+
+  .questionstatusINVALID {
+    color: #c00;
+  }
+
+  .specstatusAPPROVED {
+    color: green;
+
+    a {
+      color: green;
+    }
+  }
+
+  .specstatusPENDINGAPPROVAL, .specstatusPENDINGREVIEW {
+    color: #f09;
+
+    a {
+      color: #f09;
+    }
+  }
+
+  .specstatusDRAFT, .specstatusDISCUSSION {
+    color: #930;
+
+    a {
+      color: #930;
+    }
+  }
+
+  .specstatusNEW {
+    color: red;
+
+    a {
+      color: red;
+    }
+  }
+
+  .specstatusSUPERSEDED, .specstatusOBSOLETE, .specpriorityNOTFORUS, .specpriorityUNDEFINED {
+    color: gray;
+
+    a {
+      color: gray;
+    }
+  }
+
+  .specpriorityLOW {
+    color: black;
+
+    a {
+      color: black;
+    }
+  }
+
+  .specpriorityMEDIUM {
+    color: #f60;
+
+    a {
+      color: #f60;
+    }
+  }
+
+  .specpriorityHIGH, .specpriorityESSENTIAL {
+    color: red;
+
+    a {
+      color: red;
+    }
+  }
+
+  .specdeliveryUNKNOWN, .specdeliveryNOTSTARTED {
+    color: gray;
+
+    a {
+      color: gray;
+    }
+  }
+
+  .specdeliveryDEFERRED, .specdeliveryNEEDSINFRASTUCTURE, .specdeliveryBLOCKED {
+    color: red;
+
+    a {
+      color: red;
+    }
+  }
+
+  .specdeliverySTARTED, .specdeliveryGOOD {
+    color: blue;
+
+    a {
+      color: blue;
+    }
+  }
+
+  .specdeliverySLOW {
+    color: red;
+
+    a {
+      color: red;
+    }
+  }
+
+  .specdeliveryBETA {
+    color: #f60;
+
+    a {
+      color: #f60;
+    }
+  }
+
+  .specdeliveryNEEDSREVIEW {
+    color: purple;
+
+    a {
+      color: purple;
+    }
+  }
+
+  .specdeliveryAWAITINGDEPLOYMENT {
+    color: red;
+
+    a {
+      color: red;
+    }
+  }
+
+  .specdeliveryIMPLEMENTED, .specdeliveryINFORMATIONAL {
+    color: green;
+
+    a {
+      color: green;
+    }
+  }
+
+  .bug-activity {
+    color: #555;
+  }
+
+  .statusNEW {
+    color: #930;
+
+    a {
+      color: #930;
+    }
+  }
+
+  .statusINCOMPLETE, .statusCONFIRMED {
+    color: red;
+
+    a {
+      color: red;
+    }
+  }
+
+  .statusTRIAGED {
+    color: #f60;
+
+    a {
+      color: #f60;
+    }
+  }
+
+  .statusINPROGRESS {
+    color: black;
+
+    a {
+      color: black;
+    }
+  }
+
+  .statusFIXCOMMITTED {
+    color: #050;
+
+    a {
+      color: #050;
+    }
+  }
+
+  .statusFIXRELEASED {
+    color: green;
+
+    a {
+      color: green;
+    }
+  }
+
+  .statusINVALID, .statusWONTFIX, .statusOPINION {
+    color: #555;
+
+    a {
+      color: #555;
+    }
+  }
+
+  .importanceCRITICAL {
+    color: red;
+
+    a {
+      color: red;
+    }
+  }
+
+  .importanceHIGH {
+    color: #f60;
+
+    a {
+      color: #f60;
+    }
+  }
+
+  .importanceMEDIUM {
+    color: green;
+
+    a {
+      color: green;
+    }
+  }
+
+  .importanceLOW {
+    color: black;
+
+    a {
+      color: black;
+    }
+  }
+
+  .importanceWISHLIST {
+    color: blue;
+
+    a {
+      color: blue;
+    }
+  }
+
+  .importanceUNDECIDED {
+    color: #999;
+
+    a {
+      color: #999;
+    }
+  }
+
+  #client-listing {
+    .statusUNKNOWN, .statusNEW, .statusINCOMPLETE {
+      color: #c63600;
+      background-color: #ffdabe;
+
+      a {
+        color: #c63600;
+        background-color: #ffdabe;
+      }
+    }
+
+    .statusCONFIRMED, .statusTRIAGED {
+      color: #896e00;
+      background-color: #f4f1a4;
+
+      a {
+        color: #896e00;
+        background-color: #f4f1a4;
+      }
+    }
+
+    .statusINPROGRESS, .statusFIXCOMMITTED {
+      color: #137587;
+      background-color: #cbe7ef;
+
+      a {
+        color: #137587;
+        background-color: #cbe7ef;
+      }
+    }
+
+    .statusFIXRELEASED {
+      color: #4f7b10;
+      background-color: #cef1a0;
+
+      a {
+        color: #4f7b10;
+        background-color: #cef1a0;
+      }
+    }
+
+    .statusEXPIRED, .statusINVALID, .statusWONTFIX, .statusOPINION {
+      color: #464646;
+      background-color: #ddd;
+
+      a {
+        color: #464646;
+        background-color: #ddd;
+      }
+    }
+
+    .importanceCRITICAL {
+      background-color: #DF382C;
+      color: white;
+
+      a {
+        background-color: #DF382C;
+        color: white;
+      }
+    }
+
+    .importanceHIGH {
+      background-color: #EFB73E;
+      color: white;
+
+      a {
+        background-color: #EFB73E;
+        color: white;
+      }
+    }
+
+    .importanceMEDIUM {
+      background-color: #19B6EE;
+      color: white;
+
+      a {
+        background-color: #19B6EE;
+        color: white;
+      }
+    }
+
+    .importanceLOW {
+      background-color: #38B44A;
+      color: white;
+
+      a {
+        background-color: #38B44A;
+        color: white;
+      }
+    }
+
+    .importanceWISHLIST {
+      background-color: #724dc8;
+      color: white;
+
+      a {
+        background-color: #724dc8;
+        color: white;
+      }
+    }
+
+    .importanceUNDECIDED {
+      background-color: #666666;
+      color: white;
+
+      a {
+        background-color: #666666;
+        color: white;
+      }
+    }
+  }
+
+  a {
+    &.official-tag {
+      /* Looks just like a normal link  */
+    }
+
+    &.unofficial-tag {
+      color: #6699ee;
+    }
+  }
+
+  .vcsimportSUCCESS {
+    /* inherited text color */
+  }
+
+  .vcsimportFAILURE {
+    color: Red;
+  }
+
+  .greylink a {
+    &:link, &:visited {
+      color: gray;
+    }
+  }
+
+  .stale-diff {
+    color: #f60;
+  }
+
+  .conflicts-diff {
+    color: red;
+  }
+
+  .branchstatusMATURE {
+    color: #090;
+
+    a {
+      color: #090;
+    }
+  }
+
+  .branchstatusDEVELOPMENT {
+    color: #900;
+
+    a {
+      color: #900;
+    }
+  }
+
+  .branchstatusEXPERIMENTAL {
+    color: #930;
+
+    a {
+      color: #930;
+    }
+  }
+
+  .branchstatusMERGED, .branchstatusABANDONED {
+    color: gray;
+
+    a {
+      color: gray;
+    }
+  }
+
+  .branchstatusNEW {
+    color: black;
+
+    a {
+      color: black;
+    }
+  }
+
+  .voteAPPROVE {
+    color: green;
+  }
+
+  .voteNEEDS_FIXING {
+    color: #930;
+  }
+
+  .voteDISAPPROVE, .voteRESUBMIT {
+    color: red;
+  }
+
+  .voteABSTAIN {
+    color: #666;
+  }
+
+  .votePENDING {
+    color: #f60;
+  }
+
+  .mergestatusWORK_IN_PROGRESS {
+    color: black;
+
+    a {
+      color: black;
+    }
+  }
+
+  .mergestatusNEEDS_REVIEW {
+    color: #f60;
+
+    a {
+      color: #f60;
+    }
+  }
+
+  .mergestatusCODE_APPROVED, .mergestatusMERGED {
+    color: green;
+
+    a {
+      color: green;
+    }
+  }
+
+  .mergestatusREJECTED, .mergestatusMERGE_FAILED {
+    color: red;
+
+    a {
+      color: red;
+    }
+  }
+
+  .mergestatusQUEUED {
+    color: black;
+
+    a {
+      color: black;
+    }
+  }
+
+  .mergestatusSUPERSEDED {
+    color: #666;
+
+    a {
+      color: #666;
+    }
+  }
+
+  .codeimportNEW {
+    color: #930;
+  }
+
+  .codeimportREVIEWED {
+    color: green;
+  }
+
+  .codeimportINVALID, .codeimportSUSPENDED, .codeimportFAILING {
+    color: red;
+  }
+
+  .translationimportstatusAPPROVED {
+    color: #050;
+
+    a {
+      color: #050;
+    }
+  }
+
+  .translationimportstatusIMPORTED {
+    color: green;
+
+    a {
+      color: green;
+    }
+  }
+
+  .translationimportstatusDELETED {
+    color: black;
+
+    a {
+      color: black;
+    }
+  }
+
+  .translationimportstatusFAILED {
+    color: red;
+
+    a {
+      color: red;
+    }
+  }
+
+  .translationimportstatusNEEDS_REVIEW {
+    color: #f60;
+
+    a {
+      color: #f60;
+    }
+  }
+
+  .translationimportstatusBLOCKED {
+    color: blue;
+
+    a {
+      color: blue;
+    }
+  }
+
+  .translationimportstatusNEEDS_INFORMATION {
+    color: maroon;
+
+    a {
+      color: maroon;
+    }
+  }
+
+  .dismissed {
+    color: #666;
+
+    a {
+      color: #666;
+    }
+  }
+
+  .distromirrorstatusUP, .distromirrorstatusONEHOURBEHIND, .distromirrorstatusTWOHOURSBEHIND, .distromirrorstatusFOURHOURSBEHIND, .distromirrorstatusSIXHOURSBEHIND {
+    color: green;
+  }
+
+  .distromirrorstatusONEDAYBEHIND {
+    color: #f60;
+  }
+
+  .distromirrorstatusTWODAYSBEHIND, .distromirrorstatusONEWEEKBEHIND {
+    color: red;
+  }
+
+  .distromirrorstatusUNKNOWN {
+    color: #666;
+  }
+
+  .buildstatusNEEDSBUILD {
+    color: gray;
+  }
+
+  .buildstatusBUILDING {
+    color: black;
+  }
+
+  .buildstatusFULLYBUILT {
+    color: green;
+  }
+
+  .buildstatusFAILEDTOBUILD, .buildstatusMANUALDEPWAIT, .buildstatusCHROOTWAIT, .buildstatusSUPERSEDED, .buildstatusFAILEDTOUPLOAD {
+    color: red;
+  }
+
+  .launchpad-gold {
+    color: #F8C300;
+  }
+
+  .green {
+    color: green;
+  }
+
+  .red {
+    color: red;
+  }
diff --git a/lib/canonical/launchpad/icing/css/forms.css b/lib/canonical/launchpad/icing/css/forms.scss
 similarity index 68%
 rename from lib/canonical/launchpad/icing/css/forms.css
 rename to lib/canonical/launchpad/icing/css/forms.scss
index f946c69..592408d 100644
--- a/lib/canonical/launchpad/icing/css/forms.css
+++ b/lib/canonical/launchpad/icing/css/forms.scss
@@ -1,458 +1,585 @@
+// This file the result of auto-converting forms.css to scss.
+
 form {
     margin-bottom: 1em;
+
+    h1 {
+      margin-bottom: 1em;
     }
-form h1 {
-    margin-bottom: 1em;
-    }
-form table th, form table td {
-    padding: 2px;
-    }
-form table tbody th {
-    font-weight: bold;
-    }
-form table label {
-    font-weight: bold;
+
+    table {
+      th, td {
+        padding: 2px;
+      }
+
+      tbody th, label {
+        font-weight: bold;
+      }
     }
-.compound {
+  }
+
+  .compound {
     margin-bottom: .5em;
-    }
-.field.subordinate label {
+  }
+
+  .field.subordinate label {
     font-weight: normal;
-    }
-fieldset {
+  }
+
+  fieldset {
     border-width: 2px 0 0;
     margin: 1em 0;
     padding: 1em 0 0;
-    }
-label {
+  }
+
+  label {
     white-space: nowrap;
+  }
+
+  input {
+    &[type='image'] {
+      vertical-align: middle;
     }
-input[type='image'] {
-    vertical-align: middle;
-    }
-input {
+
     visibility: inherit;
+
+    &[type=radio] {
+      margin-left: 1em;
     }
-input[type=radio],
-.processors input {
+  }
+
+  .processors input {
     margin-left: 1em;
-    }
-input.urlTextType {
+  }
+
+  input.urlTextType {
     width: 40em;
-    }
-textarea {
+  }
+
+  textarea {
     display: block;
     width: 90%;
     max-width: 60em;
     padding: 2px;
-    }
-button {
+  }
+
+  button {
     padding: 0;
-    }
-button.overlay-close-button {
-    float: right;
-    width: 15px;
-    height: 15px;
-    display: block;
-    margin-top: 4px;
-    }
-input[type=input] + button,
-img[src$=spinner] + button  {
+
+    &.overlay-close-button {
+      float: right;
+      width: 15px;
+      height: 15px;
+      display: block;
+      margin-top: 4px;
+    }
+  }
+
+  input[type=input] + button, img[src$=spinner] + button {
     margin-left: 6px !important;
-    }
-.selection-choices {
-    margin: 0.75em 0 0 1em
-    }
-.fieldRequired, .fieldOptional {
+  }
+
+  .selection-choices {
+    margin: 0.75em 0 0 1em;
+  }
+
+  .fieldRequired, .fieldOptional {
     color: #999;
-    }
-.field.subordinate {
+  }
+
+  .field.subordinate {
     margin-left: 2.6em;
-    }
-.formHelp {
+  }
+
+  .formHelp {
     max-width: 45em;
     margin: 0.2em 0 0.5em 0.2em;
     color: #666;
-    }
-.subordinate[type="checkbox"] + label + .formHelp {
+  }
+
+  .subordinate[type="checkbox"] + label + .formHelp {
     margin-left: 3.4em;
-    }
-.listbox {
+  }
+
+  .listbox {
     /* a scrolling list of checkboxes or radio buttons */
     border: 1px solid #8cacbb;
     display: inline-block;
     max-height: 12em;
     overflow: auto;
     overflow: -moz-scrollbars-vertical;
+
+    label {
+      background-color: #f6f6f6;
+      border: solid white;
+      border-width: 0 0 1px 0;
+      display: block;
     }
-.listbox label {
-    background-color: #f6f6f6;
-    border: solid white;
-    border-width: 0 0 1px 0;
-    display: block;
-    }
-.extra-form-buttons {
+  }
+
+  .extra-form-buttons {
     text-align: center;
     padding-top: 1em;
+
+    button {
+      margin-right: 0.7em;
     }
-.extra-form-buttons button {
-    margin-right: 0.7em;
-    }
-.actions * {
-    /*
-      Action links are those that begin the process of doing something.
-      For example, "Register a branch", "Edit profile", "Link to CVE".
-      When presented inline, they are rendered by launchpad-inline-link.pt.
+  }
 
-      Action buttons are those that submit a multi-row form.
-      Often an action button will have an "or _Cancel_" link next to it.
+  .actions {
+    * {
+      /*
+        Action links are those that begin the process of doing something.
+        For example, "Register a branch", "Edit profile", "Link to CVE".
+        When presented inline, they are rendered by launchpad-inline-link.pt.
 
-      We want 0.5em horizontal gap between links and buttons in these
-      sections. Using margin-left would cause a bad gap to the left of a
-      leftmost item. Using margin-right would cause a bad gap to the right of
-      a rightmost item. We could fix these problems with :first-child/:last-
-      child, but not in IE. So we do something a little tricky. We go ahead
-      and give each child of the actions container a right margin:
-    */
-    margin-right: 0.5em;
-    }
-.actions * * {
-    /* because ">" doesn't work in IE6 */
-    margin-right: 0;
+        Action buttons are those that submit a multi-row form.
+        Often an action button will have an "or _Cancel_" link next to it.
+
+        We want 0.5em horizontal gap between links and buttons in these
+        sections. Using margin-left would cause a bad gap to the left of a
+        leftmost item. Using margin-right would cause a bad gap to the right of
+        a rightmost item. We could fix these problems with :first-child/:last-
+        child, but not in IE. So we do something a little tricky. We go ahead
+        and give each child of the actions container a right margin:
+      */
+      margin-right: 0.5em;
+
+      * {
+        /* because ">" doesn't work in IE6 */
+        margin-right: 0;
+      }
     }
-.actions {
+
     /* Then in addition to the top/bottom margins of the actions container,
        we give it a *negative* right margin, cancelling out that of the last
        child. */
     margin: 1em -0.5em 1em 0;
+  }
+
+  table {
+    &.radio-button-widget tr td {
+      /* Opera doesn't use the general tr above for the radio button table */
+      vertical-align: top;
     }
-table.radio-button-widget tr td {
-    /* Opera doesn't use the general tr above for the radio button table */
-    vertical-align: top;
-    }
-table.listing div.field>table {
-    /* Hack to add breathing room to bug status forms: */
-    margin-top: 0.5em;
-    }
-table.listing div.field>label,
-table.listing div.field>div>label,
-table.listing div.actions {
-    display: block;
-    margin-top: 1em;
-    }
-table.form, table.extra-options {
-    /* Many forms are laid out using tables, with appropriate spacing: */
-    /* http://launchpad.test/firefox/+edit */
-    margin: 1em 0 inherit inherit;
-    width: 100%;
-    }
-table.form th {
-    font-weight: normal;
+
+    &.listing div {
+      &.field > {
+        table {
+          /* Hack to add breathing room to bug status forms: */
+          margin-top: 0.5em;
+        }
+
+        label, div > label {
+          display: block;
+          margin-top: 1em;
+        }
+      }
+
+      &.actions {
+        display: block;
+        margin-top: 1em;
+      }
     }
-table.form th, table.form td,
-table.form table.extra-options td,
-table.form table.extra-options th {
-    padding-bottom: 1em;
+
+    &.form, &.extra-options {
+      /* Many forms are laid out using tables, with appropriate spacing: */
+      /* http://launchpad.test/firefox/+edit */
+      margin: 1em 0 inherit inherit;
+      width: 100%;
     }
-table.form table.listing th,
-table.form table.listing td {
-    padding-bottom: 0.25em;
-}
-table.form td td {
-    padding-bottom: 0;
+
+    &.form {
+      th {
+        font-weight: normal;
+        padding-bottom: 1em;
+      }
+
+      td {
+        padding-bottom: 1em;
+      }
+
+      table {
+        &.extra-options {
+          td, th {
+            padding-bottom: 1em;
+          }
+        }
+
+        &.listing {
+          th, td {
+            padding-bottom: 0.25em;
+          }
+        }
+      }
+
+      td td {
+        padding-bottom: 0;
+      }
     }
-.long td {
-    /* Long forms are composed of multiple tables and visible fieldsets */
-    padding-right: 1em;
+  }
+
+  .long {
+    td {
+      /* Long forms are composed of multiple tables and visible fieldsets */
+      padding-right: 1em;
     }
-.long fieldset {
-    margin-top: 1em;
+
+    fieldset {
+      margin-top: 1em;
     }
-.long legend {
-    color: #666;
-    font-weight: bold;
+
+    legend {
+      color: #666;
+      font-weight: bold;
     }
-.collapsible {
+  }
+
+  .collapsible {
     /* Collapsible sections
        Some page sections are hidden by default, expanded by clicking a link.
        see lp.js:activate_collapsibles() */
     border: none;
     margin: 0;
+  }
+
+  fieldset.collapsible {
+    padding: 16px 0 0;
+
+    /* "Add a comment/attachment" form in bug reports */
+  }
+
+  .collapsible {
+    h2 {
+      margin-top: 0;
     }
-fieldset.collapsible {
-    padding: 16px 0 0; /* "Add a comment/attachment" form in bug reports */
-    }
-.collapsible h2 {
-    margin-top: 0;
-    }
-.collapsible .collapsed {
-    display: none;
+
+    .collapsed {
+      display: none;
     }
-.collapsible .expanded {
-    display: block;
+
+    .expanded {
+      display: block;
     }
-.collapsible > :first-child {
-    font-weight: normal;
+
+    > :first-child {
+      font-weight: normal;
+      text-decoration: none;
     }
-.collapsible > :first-child, .collapsible :first-child a:hover {
-    text-decoration: none;
+
+    :first-child a:hover {
+      text-decoration: none;
     }
-.collapsible > :first-child a span {
-    text-decoration: underline;
+
+    > :first-child a span {
+      text-decoration: underline;
     }
-img.collapseIcon {
+  }
+
+  img.collapseIcon {
     text-decoration: none;
     vertical-align: middle;
-    }
-.collapsible .collapsed {
+  }
+
+  .collapsible .collapsed {
     border: none;
     margin-bottom: 0;
+  }
+
+  .yui3-pretty-overlay #yui3-pretty-overlay-modal {
+    h1, h2 {
+      /* lazr is injecting presumptive markup. */
+      color: #333;
+      margin-right: 15px;
     }
-.yui3-pretty-overlay #yui3-pretty-overlay-modal h1,
-.yui3-pretty-overlay #yui3-pretty-overlay-modal h2 {
-    /* lazr is injecting presumptive markup. */
-    color: #333;
-    margin-right: 15px;
-    }
-.yui3-editable_text {
+  }
+
+  .yui3-editable_text {
     outline: none;
-    }
-.yui3-ieditor {
+  }
+
+  .yui3-ieditor {
     padding-right: 288px;
-    }
-.yui3-skin-sam .yui3-ieditor-input {
+  }
+
+  .yui3-skin-sam .yui3-ieditor-input {
     margin-top: 0;
-}
-h1 .yui3-ieditor-errors {
+  }
+
+  h1 .yui3-ieditor-errors {
     font-size: 12px;
-    }
-.steps h2 {
+  }
+
+  .steps h2 {
     /* lazr is injecting presumptive markup. */
     font-size: 12px;
     line-height: 30px;
-    }
-.step-links {
+  }
+
+  .step-links {
     padding-top: 0;
     padding-bottom: 0;
     margin-left: 0.75em;
     margin-right: 10em;
     text-align: left;
+
+    .prev {
+      margin-right: 0.7em;
     }
-.step-links .prev {
-    margin-right: 0.7em;
-    }
-.lazr-multiline-edit .yui3-ieditor {
-    padding-right: 0;
+  }
+
+  .lazr-multiline-edit {
+    .yui3-ieditor {
+      padding-right: 0;
     }
-.lazr-multiline-edit .clearfix h3 {
-    /* Undo the damage done by lazr. */
-    font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
-    line-height: 12px;
+
+    .clearfix h3 {
+      /* Undo the damage done by lazr. */
+      font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
+      line-height: 12px;
     }
-.widget-hd.js-action {
+  }
+
+  .widget-hd.js-action {
     /* The js-action class is also used for non-links, for example, with
        expand/collapse sections. */
     color: #093;
     cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
     }
-.widget-hd.js-action:hover {
-    text-decoration: underline;
-    }
+  }
 
-.yui3-ichoicesource-content .value:hover {
+  .yui3-ichoicesource-content .value:hover {
     text-decoration: underline;
     cursor: pointer;
-    }
+  }
 
-.no-click:hover {
+  .no-click:hover {
     text-decoration: none !important;
     cursor: default !important;
-    }
-    
-.yui3-buglisting-config-util a {
+  }
+
+  .yui3-buglisting-config-util a {
     position: relative;
     top: 3px;
     left: 4px;
-    }
-.yui3-baseconfigutil a {
+  }
+
+  .yui3-baseconfigutil a {
     cursor: pointer;
+  }
+
+  .yui3-buglisting-config-util-overlay {
+    a.close-button {
+      visibility: inherit;
     }
-.yui3-buglisting-config-util-overlay a.close-button {
-    visibility: inherit;
-    }
-.yui3-buglisting-config-util-overlay form {
-    width: 80%;
+
+    form {
+      width: 80%;
     }
-.yui3-buglisting-config-util-overlay div.yui3-lazr-formoverlay-actions {
-    text-align: left;
+
+    div.yui3-lazr-formoverlay-actions {
+      text-align: left;
     }
-.yui3-buglisting-config-util-overlay .reset-buglisting {
-    position: relative;
-    top: 20px;
-    left: 75px;
-    cursor: pointer;
+
+    .reset-buglisting {
+      position: relative;
+      top: 20px;
+      left: 75px;
+      cursor: pointer;
     }
-.error.message, .warning.message, .informational.message {
+  }
+
+  .error.message, .warning.message, .informational.message {
     border: solid #666;
     border-width: 1px 2px 2px 1px;
     color: black;
     margin: 1em auto 1em auto;
     padding: 0 1em 1em 2em;
     width: 30em;
-    }
-.error.message::before, .warning.message::before,
-.informational.message::before {
+  }
+
+  .error.message::before, .warning.message::before, .informational.message::before {
     /* The alerts are preceded with an icon overlaying the top left corner: */
     display: block;
     margin: -15px 0 -6px -35px;
-    }
-.error {
+  }
+
+  .error {
     /* Error messages are pink, with alerts having an error icon: */
     background: #ffe4e4;
+
+    &.message::before {
+      content: url(/@@/error-large);
     }
-.error.message::before {
-    content: url(/@@/error-large);
-    }
-.warning {
+  }
+
+  .warning {
     /* Warning messages are orange, with alerts having a warning icon: */
     background: #fff59c;
+
+    &.message::before {
+      content: url(/@@/warning-large);
     }
-.warning.message::before {
-    content: url(/@@/warning-large);
-    }
-.informational {
+  }
+
+  .informational {
     /* Informational messages are blue-to-grey, alerts have an info icon. */
 
     background: #d4e8ff url(/+icing/blue-fade-to-grey);
+
+    &.message::before {
+      content: url(/@@/info-large);
     }
-.informational.message::before {
-    content: url(/@@/info-large);
-    }
-.informational p.last {
-    margin-bottom: 0;
+
+    p.last {
+      margin-bottom: 0;
     }
-.debugging {
+  }
+
+  .debugging {
     /* Debugging messages are white on grey, alerts have an info icon. */
     background: #666;
     color: white;
+
+    &.message::before {
+      content: url(/@@/info-large);
     }
-.debugging.message::before {
-    content: url(/@@/info-large);
-    }
-.error .message {
+  }
+
+  .error .message {
     /* And inside, the error message itself uses a smaller icon. */
     background: url(/@@/error) center left no-repeat;
     margin-bottom: 0.25em;
     padding-left: 18px;
-    }
-table.form .error {
+  }
+
+  table.form .error {
     /* Form errors override this background color, because the lack of space
        between the edge of fields and the edge of the color would look bad. */
     background: none;
-    }
-.inline-warning {
+  }
+
+  .inline-warning {
     /* Warning messages inlined in the page. */
     color: red;
     font-weight: bold;
-    }
-.sml-informational {
+  }
+
+  .sml-informational {
     background: #d4e8ff url('/+icing/blue-fade-to-grey');
     border: solid #666;
     border-width: 1px 2px 2px 1px;
     padding: 5px 5px 5px 5px;
     width: 44em;
+
+    &::before {
+      content: url('/@@/info');
     }
-.sml-informational::before {
-    content: url('/@@/info');
-    }
-.important-notice-popup {
+  }
+
+  .important-notice-popup {
     padding: 1em 1em 0 1em;
     width: auto;
     overflow: hidden;
-    }
-.important-notice-container {
+  }
+
+  .important-notice-container {
     text-align: center;
     width: 100%;
     padding-bottom: 1em;
     position: relative;
-    }
-.important-notice-balloon {
+  }
+
+  .important-notice-balloon {
     border-radius: 5px;
     background-color: #ededed;
     padding: 1em;
     border: 1px solid #000;
     width: auto;
     overflow: hidden;
-    }
-.important-notice-buttons {
+  }
+
+  .important-notice-buttons {
     float: right;
-    }
-.important-notice-cancel-button {
+  }
+
+  .important-notice-cancel-button {
     visibility: hidden;
     cursor: pointer;
-    }
-.important-notice {
+  }
+
+  .important-notice {
     padding: 0px 0px 40px 0px;
     height: 32px;
     overflow: hidden;
+
+    a {
+      font-weight: bold;
+      text-decoration: underline;
     }
-.important-notice a {
-    font-weight: bold;
-    text-decoration: underline;
-    }
+  }
 
+  /* ==================
+     Translations Forms
+  */
 
-/* ==================
-   Translations Forms
-*/
+  /* ==== Translations hand-made forms ==== */
 
-/* ==== Translations hand-made forms ==== */
+  form.translations {
+    div {
+      &.fields {
+        padding: 1em;
+      }
 
-form.translations div.fields {
-    padding: 1em;
+      &.actions {
+        padding: 1em;
+        text-align: left;
+        clear: both;
+      }
     }
-form.translations div.actions {
-    padding: 1em;
-    text-align: left;
-    clear: both;
-    }
-form.translations input {
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-    }
-form.translations select {
-    margin-left: 0.5em;
-    padding-right: 0.5em;
-    }
-form.translations label {
-    padding-left: 0.5em;
-    padding-right: 1em;
-    }
-form.translations .listbox label {
-    padding: 2px 1em 2px 2px;
-    }
-
-/* Provide top-alignment for radio boxes and longer explanations
- * without using tables.
- *
- * Examples:
- *   https://translations.launchpad.test/evolution/trunk/+pots/evolution-2.2/es/+upload
- *   https://translations.launchpad.test/evolution/trunk/+pots/evolution-2.2/+export
- */
-form.translations div.alignment .content {
-    float: left;
-    }
-form.translations div.alignment .selector {
-    margin-right: 0.5em;
-    float: left;
-    clear: both;
-    }
-form.translations div.alignment .content label {
-    padding: 0px;
-    margin: 0px;
-    font-weight: bold;
+
+    input {
+      padding-left: 0.5em;
+      padding-right: 0.5em;
     }
-form.translations div.alignment .secondary label {
-    font-weight: normal;
-    padding: 2px 1em 2px 2px;
+
+    select {
+      margin-left: 0.5em;
+      padding-right: 0.5em;
+    }
+
+    label {
+      padding-left: 0.5em;
+      padding-right: 1em;
+    }
+
+    .listbox label {
+      padding: 2px 1em 2px 2px;
+    }
+
+    div.alignment {
+      .content {
+        float: left;
+      }
+
+      .selector {
+        margin-right: 0.5em;
+        float: left;
+        clear: both;
+      }
+
+      .content label {
+        padding: 0px;
+        margin: 0px;
+        font-weight: bold;
+      }
+
+      .secondary label {
+        font-weight: normal;
+        padding: 2px 1em 2px 2px;
+      }
     }
+  }
diff --git a/lib/canonical/launchpad/icing/css/layout.css b/lib/canonical/launchpad/icing/css/layout.scss
 similarity index 78%
 rename from lib/canonical/launchpad/icing/css/layout.css
 rename to lib/canonical/launchpad/icing/css/layout.scss
index cfe8ec3..d01f79a 100644
--- a/lib/canonical/launchpad/icing/css/layout.css
+++ b/lib/canonical/launchpad/icing/css/layout.scss
@@ -1,44 +1,55 @@
+// This file the result of auto-converting layout.css to scss.
+
 /* This probably shouldn't be here, but I'm not sure where to put it yet */
+
 .yui-d0 {
     margin: 10px 20px;
-    }
-.yui-t4 .yui-b {
-    width: 21%;
-    }
-.yui-t4 .yui-main {
-    clear: both;
-    float: left;
-    margin-right: -25%;
-    }
-.yui-t4 .yui-main .yui-b {
-    width: auto;
-    margin-right: 25%;
+  }
+
+  .yui-t4 {
+    .yui-b {
+      width: 21%;
     }
 
+    .yui-main {
+      clear: both;
+      float: left;
+      margin-right: -25%;
 
+      .yui-b {
+        width: auto;
+        margin-right: 25%;
+      }
+    }
+  }
 
-/* =========================
-   Header
-*/
-.demo {
+  /* =========================
+     Header
+  */
+
+  .demo {
     background-color: #fee;
-    }
-.login-logout {
+  }
+
+  .login-logout {
     position: absolute;
     top: .5em;
     right: 1.5em;
-    }
-#rendertime {
+  }
+
+  #rendertime {
     float: left;
     margin: 0.1em 1.2em 0 0;
     color: #666;
-    }
-#ajax-time {
+  }
+
+  #ajax-time {
     float: left;
     margin: 0 1.2em 0 0.2em;
     position: relative;
-    }
-#ajax-time-list {
+  }
+
+  #ajax-time-list {
     position: absolute;
     z-index: 10;
     top: 20px;
@@ -49,168 +60,207 @@
     -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     border-radius: 5px;
+
+    li {
+      border-bottom: 1px solid #e0e0e0;
+      padding: 3px 5px;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      span {
+        color: #999;
+        font-size: 11px;
+        display: block;
+      }
     }
-#ajax-time-list li {
-    border-bottom: 1px solid #e0e0e0;
-    padding: 3px 5px;
-    }
-#ajax-time-list li:last-child {
-    border-bottom: none;
-    }
-#ajax-time-list li span {
-    color: #999;
-    font-size: 11px;
-    display: block;
-    }
-#ajax-time-list strong.warning {
-    color: #f00;
-    background-color: transparent;
+
+    strong.warning {
+      color: #f00;
+      background-color: transparent;
     }
-/* The actions row of the watermark is reused by our mhonarc templates,
- * which we can't easily change. So about half of this is overcomplex to
- * support them too. Caution is also needed to avoid breaking
- * Product:+index's inline title edit widget.
- */
-div.watermark-apps-portlet {
+  }
+
+  /* The actions row of the watermark is reused by our mhonarc templates,
+   * which we can't easily change. So about half of this is overcomplex to
+   * support them too. Caution is also needed to avoid breaking
+   * Product:+index's inline title edit widget.
+   */
+
+  div.watermark-apps-portlet {
     clear: both;
     margin-bottom: 0.8em;
-    }
-div.watermark-apps-portlet > div {
-    display: inline-block;
-    vertical-align: middle;
-    }
-div.watermark-apps-portlet > div.wide {
-    width: 75%;
-    }
-div.watermark-apps-portlet > div > img,
-div.watermark-apps-portlet > div > a > img {
-    display: block;
-    margin: 0 1em 0 0;
-    }
-#watermark-heading {
+
+    > div {
+      display: inline-block;
+      vertical-align: middle;
+
+      &.wide {
+        width: 75%;
+      }
+
+      > {
+        img, a > img {
+          display: block;
+          margin: 0 1em 0 0;
+        }
+      }
+    }
+  }
+
+  #watermark-heading {
     color: #000;
     font-weight: normal;
     font-size: 20px;
     line-height: 26px;
     margin: 0;
+
+    :first-child {
+      font-size: 32px;
+      line-height: 32px;
     }
-#watermark-heading :first-child {
-    font-size: 32px;
-    line-height: 32px;
+
+    :link, :visited {
+      color: #000;
     }
-#watermark-heading :link, #watermark-heading :visited {
-    color: #000;
-}
-.watermark-apps-portlet ul.facetmenu {
+  }
+
+  .watermark-apps-portlet ul.facetmenu {
     margin-top: 12px;
     margin-left: -0.5em;
     white-space: nowrap;
+
+    li {
+      display: inline;
+      list-style-type: none;
+
+      a, span {
+        padding: 0.3em 0.5em;
+        margin-right: 0.4em;
+      }
+
+      a {
+        &:link, &:visited {
+          color: #000;
+          text-decoration: none;
+        }
+
+        &:hover {
+          color: #000;
+          background-color: #f3f3f3;
+        }
+      }
+
+      &.active {
+        a, span {
+          font-weight: bold;
+          color: #fff;
+          background-color: #747474;
+        }
+      }
+
+      &.disabled-tab {
+        color: #747474;
+      }
     }
-.watermark-apps-portlet ul.facetmenu li {
-    display: inline;
-    list-style-type: none;
-    }
-.watermark-apps-portlet ul.facetmenu li a,
-.watermark-apps-portlet ul.facetmenu li span {
-    padding: 0.3em 0.5em;
-    margin-right: 0.4em;
-    }
-.watermark-apps-portlet ul.facetmenu li a:link,
-.watermark-apps-portlet ul.facetmenu li a:visited {
-    color: #000;
-    text-decoration: none;
-    }
-.watermark-apps-portlet ul.facetmenu li a:hover {
-    color: #000;
-    background-color: #f3f3f3;
-    }
-.watermark-apps-portlet ul.facetmenu li.active a,
-.watermark-apps-portlet ul.facetmenu li.active span {
-    font-weight: bold;
-    color: #fff;
-    background-color: #747474;
-    }
-.watermark-apps-portlet ul.facetmenu li.disabled-tab {
-    color: #747474;
-    }
-.context-publication {
+  }
+
+  .context-publication {
     margin-bottom: 1em;
-    }
-.registering {
+  }
+
+  .registering {
     /* Registered slot */
     margin: .5em 0 1em 0;
     font-size: 10px;
     color: #666;
-    }
-.breadcrumbs {
+  }
+
+  .breadcrumbs {
     margin-left: 0;
     list-style-type: none;
     clear: both;
     font-size: 10px;
+
+    li {
+      display: inline;
+      padding: 0;
+
+      a {
+        color: #494949;
+      }
+
+      &:after {
+        content: "» ";
+      }
+
+      &:last-child {
+        /* The following leaves a small margin in chrome/webkit, but using none
+           doesn't hide the » in webkit either (both work for FF3.5). */
+        font-weight: bold;
+
+        &:after {
+          content: '';
+        }
+      }
     }
-.breadcrumbs li {
-    display: inline;
-    padding: 0;
-    }
-.breadcrumbs li a {
-    color: #494949;
-    }
-.breadcrumbs li:after {
-    content: "\00BB \0020"
-    }
-.breadcrumbs li:last-child {
-    /* The following leaves a small margin in chrome/webkit, but using none
-       doesn't hide the » in webkit either (both work for FF3.5). */
-    font-weight: bold;
-    }
-.breadcrumbs li:last-child:after {
-    content: '';
-    }
-#logincontrol {
+  }
+
+  #logincontrol {
     /* Top right of the page is a link to log in or a button to log out: */
     float: right;
+
+    img {
+      /* align the image with the text */
+      margin-bottom: -2px;
     }
-#logincontrol img {
-    /* align the image with the text */
-    margin-bottom: -2px;
-    }
-#logincontrol form {
-    margin: 0;
+
+    form {
+      margin: 0;
     }
-#logincontrol input[type='submit'] {
-    /* The button lacks the right margin that buttons usually have: */
-    font-size: 10px;
-    margin-right: 0;
+
+    input[type='submit'] {
+      /* The button lacks the right margin that buttons usually have: */
+      font-size: 10px;
+      margin-right: 0;
     }
+  }
 
+  /* =========================
+     Footer
+  */
 
-/* =========================
-   Footer
-*/
-.footer {
+  .footer {
     clear: both;
     margin-top: 4em;
     padding-top: 0.5em;
+
+    .lp-arcana {
+      background: url(/@@/footer-background.png) top left repeat-x;
+      padding: 0.8em;
+      border-radius: 5px 5px 0 0;
+      height: 2em;
+
+      img {
+        vertical-align: middle;
+      }
     }
-.footer .lp-arcana {
-    background: url(/@@/footer-background.png) top left repeat-x;
-    padding: 0.8em;
-    border-radius: 5px 5px 0 0;
-    height: 2em;
-    }
-.footer .lp-arcana img {
-    vertical-align: middle;
-    }
-.footer .sitemessage {
-    text-align: right;
+
+    .sitemessage {
+      text-align: right;
     }
-.footer .colophon {
-    margin: 3em 3em 1em 3em;
-    text-align: center;
+
+    .colophon {
+      margin: 3em 3em 1em 3em;
+      text-align: center;
     }
-.footer .lp-branding {
-    float: left;
+
+    .lp-branding {
+      float: left;
     }
-.footer form {
-    display: inline;
+
+    form {
+      display: inline;
     }
+  }
diff --git a/lib/canonical/launchpad/icing/css/modifiers.css b/lib/canonical/launchpad/icing/css/modifiers.scss
 similarity index 75%
 rename from lib/canonical/launchpad/icing/css/modifiers.css
 rename to lib/canonical/launchpad/icing/css/modifiers.scss
index 03f4292..11c8f31 100644
--- a/lib/canonical/launchpad/icing/css/modifiers.css
+++ b/lib/canonical/launchpad/icing/css/modifiers.scss
@@ -1,224 +1,245 @@
-div.left,
-div.right {
-    width: 50%;
+// This file the result of auto-converting modifiers.css to scss.
+
+div {
+    &.left, &.right {
+      width: 50%;
+    }
+
+    &.left {
+      clear: both;
+      float: left;
     }
+  }
 
-div.left,
-.cves {
+  .cves {
     clear: both;
     float: left;
-    }
+  }
 
-div.right {
-    clear: right;
-    float: right;
+  div {
+    &.right {
+      clear: right;
+      float: right;
     }
 
-div.centered {
-    text-align: center;
-    }
+    &.centered {
+      text-align: center;
 
-div.centered table {
-    margin: 0 auto;
-    text-align: left;
+      table {
+        margin: 0 auto;
+        text-align: left;
+      }
     }
 
-div.see-all {
-    text-align: right;
+    &.see-all {
+      text-align: right;
     }
+  }
 
-span.nolink {
-    font-weight: bold;
+  span {
+    &.nolink {
+      font-weight: bold;
     }
 
-span.see-all {
-    float: right;
+    &.see-all {
+      float: right;
     }
+  }
 
-.see-all a {
+  .see-all a {
     padding-left: 8px;
     background: inherit;
     font-size: 12px;
     text-decoration: underline;
-    }
+  }
 
-.transparent {
+  .transparent {
     opacity: 0;
-    filter: alpha(opacity=0);
-    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    }
+    filter: alpha(opacity = 0);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  }
 
-.rss-right {
+  .rss-right {
     background: url(/@@/rss.png) right center no-repeat;
-    }
+  }
 
-.logo {
+  .logo {
     float: left;
     display: inline;
     width: 64px;
     height: 64px;
     margin: 0 5px 0 0;
-    }
+  }
 
-.registered {
+  .registered {
     color: #666;
-    }
+  }
 
-.description {
+  .description {
     clear: both;
-    }
+  }
 
-.search-results {
+  .search-results {
     margin-top: 1em;
-    }
+  }
 
-.top-portlet .summary {
+  .top-portlet .summary {
     margin: 0 0 1em 0;
+
     /* Same as h3, this appears under a h1. */
     font-size: 16px;
-    }
+  }
 
-.main-portlet {
+  .main-portlet {
     margin: 1em 0 1em 0;
-    }
+  }
 
-.pre {
+  .pre {
     white-space: pre;
-    }
+  }
 
-.clearfix:after {
+  .clearfix:after {
     /* use class="clearfix" whenever floats should be enclosed */
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
-    }
+  }
 
-* html .clearfix {
+  * html .clearfix {
     /* Work around float bug in MSIE */
     height: 1%;
-    }
+  }
 
-div.beta {
+  div.beta {
     background-color: #c24848;
     margin-bottom: 7px;
     margin-top: 7px;
     height: 10px;
     width: 175px;
-    }
 
-div.beta img {
-    height: 10px;
+    img {
+      height: 10px;
     }
+  }
 
-.scrolled-box {
+  .scrolled-box {
     max-height: 4.5em;
     overflow-y: scroll;
-    }
+  }
 
-.ellipsis.single-line {
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -o-text-overflow: ellipsis;
-    -ms-text-overflow: ellipsis;
+  .ellipsis {
+    &.single-line {
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -o-text-overflow: ellipsis;
+      -ms-text-overflow: ellipsis;
     }
 
-.ellipsis.wide {
-    max-width: 60em;
+    &.wide {
+      max-width: 60em;
     }
 
-.ellipsis:before {
-    content: attr(data-ellipsis-original-text);
-    position: absolute;
-    display: block;
+    &:before {
+      content: attr(data-ellipsis-original-text);
+      position: absolute;
+      display: block;
     }
-.ellipsis:hover:before {
-    display: block;
+
+    &:hover:before {
+      display: block;
     }
+  }
 
-.exception {
+  .exception {
     color: #cc0000;
-    }
+  }
 
-.highlight {
+  .highlight {
     background: #ddd;
     border: 1px solid #ddd;
-    }
+  }
 
-.lowlight {
+  .lowlight {
     opacity: .5;
-    filter: alpha(opacity=50);
-    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-    }
+    filter: alpha(opacity = 50);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+  }
 
-.status :link,
-.importance :link {
+  .status :link, .importance :link {
     text-decoration: none;
-    }
+  }
 
-.lesser,
-.duplicate-details {
+  .lesser, .duplicate-details {
     font-size: 10px;
     clear: left;
-    }
+  }
 
-pre.changelog,
-table.diff td.line-no, table.diff td.ss-line-no,
-table.diff td.text,
-.comment-text,
-.bug-activity {
+  pre.changelog {
     font-family: monospace;
+  }
+
+  table.diff td {
+    &.line-no, &.ss-line-no, &.text {
+      font-family: monospace;
     }
+  }
+
+  .comment-text, .bug-activity {
+    font-family: monospace;
+  }
 
-.cloud-size-smallest {
+  .cloud-size-smallest {
     font-size: 10px;
-    }
+  }
 
-.cloud-size-small {
+  .cloud-size-small {
     font-size: 12px;
-    }
+  }
 
-.cloud-size-medium {
+  .cloud-size-medium {
     font-size: 14px;
-    }
+  }
 
-.cloud-size-large {
+  .cloud-size-large {
     font-size: 16px;
-    }
+  }
 
-.cloud-size-largest {
+  .cloud-size-largest {
     font-size: 18px;
-    }
+  }
 
-.cloud-dark {
+  .cloud-dark {
     color: #00f;
-    }
+  }
 
-.cloud-medium {
+  .cloud-medium {
     color: #7878ff;
-    }
+  }
 
-.cloud-light {
+  .cloud-light {
     color: #b8b8ff;
-    }
+  }
 
-/* =========================
-   Universal presentation
-   Sprites
-*/
-.sprite {
+  /* =========================
+     Universal presentation
+     Sprites
+  */
+
+  .sprite {
     padding: 0 0 6px 18px;
     line-height: 18px;
-    }
-.block-sprite {
+  }
+
+  .block-sprite {
     padding: 2px 2px 15px 36px;
     margin-bottom: 0;
-    }
+  }
 
-.action-icon {
+  .action-icon {
     /* Textual browsers read the text, graphical browsers see the sprite. */
     display: inline-block;
     margin-left: 6px;
@@ -227,53 +248,58 @@ table.diff td.text,
     vertical-align: text-top;
     text-indent: 3px;
     overflow: hidden;
-    }
 
-.action-icon + .action-icon {
-    margin-left: 0px;
+    + .action-icon {
+      margin-left: 0px;
     }
 
-.action-icon.standalone {
-    margin-top: -6px;
+    &.standalone {
+      margin-top: -6px;
     }
+  }
 
-th .action-icon {
+  th .action-icon {
     height: 12px;
-}
+  }
 
-h1 a.sprite,
-h2 a.sprite,
-h3 a.sprite {
+  h1 a.sprite, h2 a.sprite {
     position: relative;
     top: 8px;
     font-size: 12px;
-    }
+  }
 
-h3 a.sprite {
+  h3 a.sprite {
+    position: relative;
+    top: 8px;
+    font-size: 12px;
     top: 4px;
-    }
+  }
+
+  /* Hide the grey background for the Calendar content. */
 
-/* Hide the grey background for the Calendar content. */
-.yui3-skin-sam .yui3-pretty-overlay .yui3-calendar-content {
+  .yui3-skin-sam .yui3-pretty-overlay .yui3-calendar-content {
     background: none;
     border: none;
-    }
+  }
+
+  /* Center the Calendar within its overlay. */
 
-/* Center the Calendar within its overlay. */
-.yui3-calendarbase {
+  .yui3-calendarbase {
     margin: 0 auto;
-    }
+  }
+
+  /* Hidden must be the last rule because it overides all other rules. */
 
-/* Hidden must be the last rule because it overides all other rules. */
-.inline {
+  .inline {
     display: inline;
     margin: 0;
-    }
+  }
+
+  /* Use 'hidden' to hide elements unconditionally.
+   * Some things we want to hide by default only if javascript is enabled; for
+   * these cases use 'hide-on-load'.
+   */
 
-/* Use 'hidden' to hide elements unconditionally.
- * Some things we want to hide by default only if javascript is enabled; for
- * these cases use 'hide-on-load'.
- */
-.hidden, .yui3-js-enabled .hide-on-load {
+  .hidden, .yui3-js-enabled .hide-on-load {
     display: none;
-    }
+  }
diff --git a/lib/canonical/launchpad/icing/css/typography.css b/lib/canonical/launchpad/icing/css/typography.scss
 similarity index 62%
 rename from lib/canonical/launchpad/icing/css/typography.css
 rename to lib/canonical/launchpad/icing/css/typography.scss
index b3011c1..3b2e1cd 100644
--- a/lib/canonical/launchpad/icing/css/typography.css
+++ b/lib/canonical/launchpad/icing/css/typography.scss
@@ -1,106 +1,182 @@
+// This file the result of auto-converting typography.css to scss.
+
+$page-width: 45em;
+$wider-page: $page-width + 15em;
+$reduced-spacing: 0.8em;
+$link-colour: #03a;
+$active-link-colour: #36c;
+$separate-link-colour: #093;
 
 h1, h2, h3, h4, h5, h6 {
     background: none;
     clear: left;
-    }
-h1 {
+  }
+
+  h1 {
     clear: none;
     font-size: 30px;
     line-height: 34px;
-    }
-h2 {
+  }
+
+  h2 {
     margin-top: 16px;
     margin-bottom: 8px;
     font-size: 22px;
     line-height: 26px;
-    }
-h3 {
+  }
+
+  h3 {
     margin-top: 16px;
     margin-bottom: 8px;
     font-size: 16px;
     line-height: 20px;
-    }
-.yui-u > div > h3:first-child {
+  }
+
+  .yui-u > div > h3:first-child {
     margin-top: 0;
-    }
-p {
+  }
+
+  p {
     width: auto;
-    margin-bottom: 0.8em;
-    }
-div + p, ul + p, table + p {
-    margin-top: 0.8em;
-    }
-p, li, dt, dd, blockquote, .narrow, .narrow-listing {
+    margin-bottom: $reduced-spacing;
+  }
+
+  div + p, ul + p, table + p {
+    margin-top: $reduced-spacing;
+  }
+
+  p, li, dt, dd, blockquote, .narrow, .narrow-listing {
     /* Wrap the text before the eye gets lost. */
-    max-width: 45em;
-    }
-.wide * {
-    max-width: 60em;
-    }
-table.wide {
-    width: 60em;
-    }
-pre, code, samp, tt, .console {
+    max-width: $page-width;
+  }
+
+  .wide * {
+    max-width: $wider-page;
+  }
+
+  table.wide {
+    width: $wider-page;
+  }
+
+  pre, code, samp, tt, .console {
     font-family: monospace;
-    margin-bottom: 0.8em;
-    }
-pre.wrap {
+    margin-bottom: $reduced-spacing;
+  }
+
+  pre.wrap {
     /* From nice_pre in tales.py */
     white-space: pre-wrap;
     word-wrap: break-word;
-    }
+  }
 
-:link, :visited, a.js-action {
+  :link, :visited, a.js-action {
     /* Links are blue, brighter when clicked, and greyer once visited. */
-    color: #03a;
+    color: $link-colour;
     text-decoration: none;
-    }
-:link:hover, :visited:hover, a.js-action:hover {
+  }
+
+  :link:hover, :visited:hover, a.js-action:hover {
     text-decoration: underline;
+  }
+
+  :link:active, :visited:active {
+    color: $active-link-colour;
+  }
+
+  a {
+    &.js-action:active {
+      color: $active-link-colour;
     }
-:link:active, :visited:active, a.js-action:active {
-    color: #36c;
+
+    &[onclick] {
+      /* Links that don't open separate pages are green. */
+      color: $separate-link-colour;
+      cursor: pointer;
     }
-a[onclick], .collapsible legend a, a.js-action,
-a[onclick]:active, .collapsible legend a:active, a.js-action,
-a.js-action:active {
+  }
+
+  .collapsible legend a {
     /* Links that don't open separate pages are green. */
-    color: #093;
+    color: $separate-link-colour;
     cursor: pointer;
+  }
+
+  a {
+    &.js-action, &[onclick]:active {
+      /* Links that don't open separate pages are green. */
+      color: $separate-link-colour;
+      cursor: pointer;
     }
-a.help {
-    border-bottom: 1px dotted #03a;
-    cursor: help;
+  }
+
+  .collapsible legend a:active {
+    /* Links that don't open separate pages are green. */
+    color: $separate-link-colour;
+    cursor: pointer;
+  }
+
+  a {
+    &.js-action {
+      /* Links that don't open separate pages are green. */
+      color: $separate-link-colour;
+      cursor: pointer;
+
+      &:active {
+        /* Links that don't open separate pages are green. */
+        color: $separate-link-colour;
+        cursor: pointer;
+      }
     }
-a.help:hover, a.action-icon:hover {
-    text-decoration: none;
+
+    &.help {
+      border-bottom: 1px dotted $link-colour;
+      cursor: help;
+
+      &:hover {
+        text-decoration: none;
+      }
     }
-a.help.icon, a.sprite.maybe.help {
-    border: none;
-}
-a.invalid-link, a.invalid-link:active, a.invalid-link:hover {
-    color: #909090;
-    text-decoration: none;
-    cursor: default;
+
+    &.action-icon:hover {
+      text-decoration: none;
+    }
+
+    &.help.icon, &.sprite.maybe.help {
+      border: none;
+    }
+
+    &.invalid-link {
+      color: #909090;
+      text-decoration: none;
+      cursor: default;
+
+      &:active, &:hover {
+        color: #909090;
+        text-decoration: none;
+        cursor: default;
+      }
     }
-img, a img {
+  }
+
+  img, a img {
     /* No border on images that are links. */
     border: none;
-    }
-abbr[title], acronym[title] {
+  }
+
+  abbr[title], acronym[title] {
     border-bottom: 1px dotted black;
     cursor: help;
-    }
-em {
+  }
+
+  em {
     font-style: italic;
-    }
-strong {
-    font-weight: bold;
-    }
-.title {
+  }
+
+  strong, .title {
     font-weight: bold;
-    }
-kbd {
+  }
+
+  kbd {
     background-color: #ddd;
     border: 1px solid;
     border-color: white gray gray white;
@@ -108,10 +184,12 @@ kbd {
     margin: 1px;
     min-width: 1em;
     outline: 1px #666;
-    }
-tt.command {
+  }
+
+  tt.command {
     padding-left: 2em;
-    }
-.nowrap {
+  }
+
+  .nowrap {
     white-space: nowrap;
-    }
+  }