Evolution of a portal sass

portal.sass

@import "compass/css3"

html, #Top, #Footer
  :background-color #4C5358 !important

ol
  :list-style-type decimal !important

#Top
  +linear-gradient(color-stops(#79868E, #4C5358))
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79868E', endColorstr='#4C5358')
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#79868E', endColorstr='#4C5358')"
  :text-shadow #4C5358 0px -1px !important
  .ie6 &, .ie7 &, .gecko &, .opera &
    :background-image none
  .dnngridcontainer_16
    :background transparent !important
    #dnn_dnnLOGO_imgLogo
      :margin -25px 0
    #TopTab
      :margin-top 0 !important
      a, .inner
        :color #fff !important
        :text-shadow #000000 0 -1px !important

.hp_logo
  :margin 17px 0 20px 0

#XMENU1
  div.menubar-r
    :background-image url(menubar_r.png) !important
  div.menubar-m
    :background-image url(menubar_m.png) !important
  a.active
    :color #000000 !important
    :text-shadow none !important
  a:hover.level1
    :color #000000 !important
    :text-shadow #fff 0 1px !important

.photobox
  .photobox1
    :background-image url(images/business-lg.jpg) !important
  .photobox2
    :background-image url(images/employee-benefits.jpg) !important
  .photobox3
    :background-image url(images/agribusiness-lg.jpg) !important
  .phototitle
    :background-color rgba(255, 214, 100, 0.8) !important
    .ie &
      :background-color #ffd664 !important
    a
      :color #634400 !important
      :text-shadow 0px 1px #dfd18e !important

.mysearch, .smallsearch, .attentionlinks a, #TopTab
  :background-image url(sprite_bg.png) !important

.jcarousel-skin-tango 
  .jcarousel-next-horizontal
    :background-image url(next-horizontal.png) !important
  .jcarousel-prev-horizontal
    :background-image url(prev-horizontal.png) !important

.Head, #XMENU1 li a.current, .attentionlinks a, .c_head_green h1, .c_head_green h1 input, #learnmore h1, #stayconnected h1, .c_head_blue h1, .c_head_blue h1 input, h1, h2, h3, h4, h5, h6
  :color #715900 !important
  :text-shadow none !important

.C01_Box
  :border-color #036 !important

.sub .label
  :color #014380 !important

#Footer
  +box-shadow(rgba(0, 0, 0, 0.5), 0, -1px, 0)
  +linear-gradient(color-stops(#79868E, #4C5358), left top)
  :border-top 1px solid #A0B7C5
  .ie &, .gecko &, .opera &
    :background-image none !important
  #dnn_dnnCOPYRIGHT_lblCopyright
    :color #fff !important
    :text-shadow #4C5358 0px -1px !important

// temporary tweetDNN layout fix

.status
  :width 307px !important

.text
  :display block !important

portal.scss

@import "compass/css3";

$primary-color: #0981a0; // Turquise
$secondary-color: #f3f0e0; // Tan
$tertiary-color: #d57803; // Orange
$link-color: #0981a0; // Blue (of course)
$curve: 5px;

@mixin gradient($start, $end) {
  @include background(linear-gradient(top, $start, $end));
  @include filter-gradient($start, $end);
  background-color: mix($start, $end); }

@mixin global-light($color) {
  @include single-box-shadow($color, 2px, 2px, 3px); }

html {
  background-color: $secondary-color / 3 !important; }

body.bp {
  .ui-flat {
    @include global-light(white / 1.5);
    background-color: $primary-color;
    margin-bottom: 40px;
    padding: 10px 15px;
    h3 {
      color: white !important;
      font-size: 16px;
      font-weight: bold;
      padding-top: 0 !important; }
    .item a {
      margin-right: 5px;
      &:hover span {
        color: white !important; }
      img {
        @include border-top-radius($curve);
        border-bottom: 1px solid $primary-color / 2; }
      span {
        @include single-text-shadow($primary-color / 4, 0, -1px, 0);
        @include border-bottom-radius($curve);
        color: $primary-color * 20 !important;
        font-size: 16px;
        background-color: $primary-color / 2;
        border-top: $primary-color / 4;
        padding: 8px 0;
        margin-top: -5px;
        width: 138px;
        text-align: center;
        display: block; } } }
  h1, h2, h3, h4, h5, h6, .phototitle {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  a.logo {
    background: {
      color: transparent;
      image: inline-image("logo.png");
      repeat: no-repeat;
      position: 0 0; };
    width: 238px !important;
    height: 114px !important;
    *background-image: url("images/logo.png"); }
  div.top {
    background: {
      color: $primary-color !important;
      image: inline-image("header_bg.png");
      repeat: no-repeat;
      position: top center; };
    padding-top: 19px !important;
    height: 93px !important;
    min-height: 93px !important;
    @include single-text-shadow($primary-color / 2, 0, -1px, 0);
    *background-image: url("images/header_bg.png");
    nav {
      top: 53px;
      margin-left: 308px;
      margin-right: 0 !important;
      li > a {
        border-left: 1px solid transparent !important; }
      li ul {
        background-color: $primary-color / 1.5 !important;
        border: 1px solid $primary-color / 2 !important; } }
    nav, #navigation {
      @include border-top-radius($curve);
      background-color: $primary-color / 1.5;
      a:hover, li.SelectedTab > a {
        color: $primary-color / 1.5 !important;
        @include gradient(#fffbfb, $secondary-color); }
      a {
        color: white !important; } }
    .phone {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 18px;
      position: absolute;
      right: 0;
      text-align: right;
      .Normal {
        @include single-text-shadow($primary-color / 2, 0, -1px, 0);
        color: white; } } }
  div.top2 {
    border-bottom: 1px solid $secondary-color / 1.2 !important;
    padding-top: 20px;
    @include gradient($secondary-color, $secondary-color * 1.1);
    .featureSidebar {
      ul {
        @include global-light($secondary-color / 1.2);
        @include border-radius($curve);
        background-color: white;
        list-style: none;
        padding: 0 !important;
        li a {
          background: {
            color: transparent;
            repeat: no-repeat;
            position: 12px 9px; };
          display: block;
          color: $secondary-color / 2.5 !important;
          padding: 18px 20px 20px 56px;
          font-size: 13px;
          border-bottom: 2px dotted $secondary-color;
          &:hover {
            color: $link-color !important; } }
        li.item1 a {
          background-image: inline-image("icon1.png");
          *background-image: url("images/icon1.png"); }
        li.item2 a {
          background-image: inline-image("icon2.png");
          *background-image: url("images/icon2.png"); }
        li.item3 a {
          background-image: inline-image("icon3.png");
          *background-image: url("images/icon3.png"); }
        li.item4 a {
          background-image: inline-image("icon4.png");
          *background-image: url("images/icon4.png"); }
        li.last a {
          border-bottom: none !important; } } } }
  .quotrr .pusher {
    color: white !important; }
  div.middle {
    a {
      border: none !important; }
    h1, h2, h3, h4, h5, h6 {
      color: $link-color / 2; }
    #dnn_Widget2Pane {
      width: 560px !important;
      padding: 0 30px;
      margin-right: 0 !important;
      background-color: $secondary-color;
      border-bottom: 1px solid $secondary-color / 1.2;
      margin-left: 10px;
      @include global-light(white / 1.3);
      @include gradient($secondary-color, $secondary-color * 1.1);
      a {
        color: $link-color;
        &:hover {
          color: $link-color * 1.5 !important; } }
      h3 {
        border-bottom: 2px dotted white; } }
    .item {
      @include inline-block;
      width: 129px;
      margin: 0 10px 0;
      a.image {
        border: none !important; } }
    .staccato {
      @include inline-block;
      @include border-radius($curve);
      background-color: $secondary-color / 1.2;
      padding: 10px 15px;
      margin: 10px 3px 30px;
      a {
        @include single-text-shadow($secondary-color / 1.5, 0, -1px, 0);
        color: $secondary-color !important;
        &:hover {
          color: $secondary-color * 1.5 !important; } } } }
  div.bottom {
    @include single-box-shadow(rgba(0, 0, 0, 0.5), 0, -1px, 0);
    border-top: 1px solid $secondary-color / 1.2;
    @include gradient($secondary-color / 4.4, $secondary-color / 3);
    ul, li a, #dnn_dnnLOGIN_cmdLogin, .FOOTER_objects, .vcard {
      border: none !important; }
    li a:hover, .FOOTER_objects:hover, .LOGIN_object:hover {
      background-color: transparent !important; }
    .custom_button {
      display: none !important; }
    h4 {
      text-transform: inherit !important;
      color: $secondary-color !important; }
    a {
      color: $link-color * 20 !important; }
    #sitesearch_footer {
      a {
        border-left: 1px solid $secondary-color / 3 !important; }
      input {
        color: $secondary-color / 4 !important;
        background-color: $secondary-color / 2 !important; } }
    .vcard img.photo {
      margin-top: -18px; } }
  .inner, .admin {
    .ui-flat {
      width: 470px; }
    .logo {
      background: {
        color: transparent;
        image: inline-image("logo.png");
        repeat: no-repeat;
        position: 0 20px; };
      width: 255px;
      height: 100px;
      *background-image: url("images/logo.png");
      a {
        @include inline-block;
        width: 320px !important;
        height: 115px !important; } } }
  .inner div.top, .admin div.top {
    @include single-box-shadow(white, 0, 0);
    padding-top: 10px !important;
    border-bottom: 5px solid $secondary-color;
    .phone {
      bottom: 71px !important; }
    #navigation {
      padding: 0 !important;
      margin-top: 52px !important;
      width: 632px !important;
      margin-left: 53px;
      li > a {
        border: none !important; }
      ul {
        margin-top: -1px; }
      li ul {
        background-color: $primary-color / 1.5; }
      li.SelectedTab a {
        font-size: 1.3em !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
      a {
        padding: 12px 20px;
        font-size: 1.3em;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        background-image: none; }
      a:hover, li.SelectedTab > a {
        color: $primary-color / 1.5 !important;
        @include single-text-shadow(white, 0, -1px, 0);
        @include gradient(#fffbfb, $secondary-color); } }
    .vcard div {
      color: $secondary-color / 2 !important; } }
  #header {
    position: relative; }
  .ui-border {
    border-color: $primary-color; }
  .sidebar {
    overflow: hidden !important;
    .ui-dialog {
      background-color: $secondary-color !important;
      a {
        color: $secondary-color / 2 !important; } } }
  .photobox {
    @include global-light($secondary-color / 1.2);
    @include border-radius($curve);
    background-color: $tertiary-color !important;
    height: 214px !important;
    border: none !important;
    .photobox1, .photobox2, .photobox3 {
      @include single-box-shadow(transparent, 0, 0, 0);
      margin-top: 9px;
      padding-top: 162px !important;
      background-position: 50% 0;
      border: none !important; }
    .photobox1 {
      background: {
        image: inline-image("laundromat-insurance.jpg") !important; };
      *background-image: url("images/laundromat-insurance.jpg") !important; }
    .photobox2 {
      background: {
        image: inline-image("home-insurance.jpg") !important; };
      *background-image: url("images/home-insurance.jpg") !important; }
    .photobox3 {
      background: {
        image: inline-image("condo-insurance.jpg") !important; };
      *background-image: url("images/condo-insurance.jpg") !important; }
    .phototitle {
      background-color: transparent !important;
      a {
        color: $secondary-color !important;
        text-shadow: 0px -1px $tertiary-color / 1.5 !important;
        &:hover {
          color: $secondary-color * 1.5 !important; } } } }
  .feature .item {
    @include box-shadow($secondary-color / 1.2 0 2px 2px, white 0 -1px 0 inset);
    @include border-radius($curve);
    @include inline-block;
    background-color: $tertiary-color !important;
    height: 215px !important;
    border: none !important;
    padding: 20px 20px 0;
    margin: 0 8px;
    a {
      @include single-text-shadow(darken($tertiary-color, 20), 0, -1px, 0);
      @include inline-block;
      width: 177px;
      text-align: center;
      color: white;
      font-weight: bold;
      font-size: 15px; } }
  .ModTweetDNNC {
    @include global-light($secondary-color / 1.2); }
  .DNNEmptyPane {
    display: none !important; }
  iframe {
    overflow: hidden;
    border: 0 solid white; }
  .quotrr {
    border: 1px solid $tertiary-color / 2 !important;
    @include global-light($secondary-color / 1.2);
    @include gradient($tertiary-color, $tertiary-color / 1.2);
    .pusher {
      border: 1px solid $primary-color * 1.3 !important;
      @include gradient($primary-color, $primary-color / 2); } } }

portal2.scss

@import "particle/layout/bravo";
@import "particle/utilities/inline-image";

$default-primary-color: #0981a0;
$default-secondary-color: #f3f0e0;
$default-tertiary-color: #d57803;
$default-button-color: darken($default-primary-color, 15);

@include bravo;
.header .logo { @include inline-image("logo.png"); }

I wanted to show how eventually modularizing your sass can help separate general styles vs modifications.