Good practice using SCSS I saw a sassy CSS for a rails app like this:

$std-margin: 30px;

@mixin solid-bg($color: #EEEEEE) {
  background: none repeat scroll 0 0 $color;
}

@mixin solid-border($direction, $width: 1px, $color: black) {
  @if $direction == "" {
    border: {
      color: $color ;
      width: $width;
      style: solid;
    }
  } @else {
    border-#{$direction}: {
      color: $color ;
      width: $width;
      style: solid;
    }
  }
}

html {
  font: 90%/1.3 arial,sans-serif;
  body {
    margin: $std-margin;
    .top-nav {
      text-align: center;
      width: 100%;
      .login {
        float: right;
        padding-right: 63px;
        clear: both;
      }
      a {
        text-decoration: none;
      }
    }
    .content {
      @include solid-border("");
      clear: both;
      padding: 15px;
    }
    h2 {
      margin: $std-margin;
      margin-left: 0px;
    }
    h3, .detail {
      margin: $std-margin;
    }
    #header {
      ul {
        list-style: none outside none;
        padding: 0;
        li {
          float: left;
          a {
            @include solid-bg();
            color: #0000CC;
            display: block;
            padding: 0.24em 1em;
            text-decoration: none;
          }
        }
      }
      #selected a {
        @include solid-bg(white);
        color: black;
        font-weight: bold;
        position: relative;
        top: 1px;
        @include solid-border("");
        @include solid-border('bottom', 0px);
      }
    }
    label {
      float: left;
      margin-right: 1em;
      text-align: right;
      width: 10em;
    }
    input {
      @include solid-bg(#FAFAFA);
      -moz-border-radius: 0.4em 0.4em 0.4em 0.4em;
      @include solid-border("", 1px, #DDDDDD);
      font: bold 0.95em arial,sans-serif;
      padding: 0.15em;
      width: 10em;
    }
    .field {
      padding: 5px;
      clear: both;
      input {
        width:12em;
        @include solid-border("", 1px, #006);
        @include solid-bg(#ffc);
        &amp;:hover {
          @include solid-border("");
          @include solid-bg(#ff6);
        }
      }
      .fieldWithErrors {
        float: left;
        padding: 3px;
        input {
        @extend .field.input;
        @include solid-border("", 2px, red);
        }
      }
      .create {
        width:5em;
      }
      .submit {
        @include solid-bg(#D0DAFD);
        border: 0 none;
        cursor: pointer !important;
        display: block;
        height: 26px;
        margin: 1em;
        overflow: hidden;
        width: 69px;
      }
    }

    table {
      border-collapse: collapse;
      margin: 20px;
      text-align: left;
      width: 480px;
      font {
       family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
       size: 12px;
      }
      th {
        @include solid-bg(#B9C9FE);
        @include solid-border('bottom', 1px, #FFFFFF);
        @include solid-border('top', 4px, #AABCFE);
        color: #003399;
        font-size: 13px;
        font-weight: normal;
        padding: 8px;
      }
      tr {
        @include solid-bg(#E8EDFF);
        &amp;:hover td {
          @include solid-bg(#D0DAFD);
          color: #333399;
        }
        td.title {
         color: #333399;
        }
      }
      td {
        @include solid-border('bottom', 1px, #FFFFFF);
        @include solid-border('top', 1px, transparent);
        color: #666699;
        padding: 8px;
      }
    }
    .activities {
      padding: 10px;
      a{
        margin: 10px;
      }
    }
    .flash {
      font-family:'Trebuchet MS';
      color:#FF0000;
      font-size:14px;
    }
    .calendar_date_select table {
      width: 78px;
      td {
        padding: 5px;
      }
    }
    .main-content {
      clear: both;
      float: left;
      width: 100%;
    }
    .clear {
      clear: both;
    }
    #errorExplanation {
      @include solid-bg();
      margin: 10px;
      padding: 5px 0 5px 20px;
    }
  }
}


Using best practice how this can be optimized?
One optimization you should do in any case is not to have all rules inside html { ... } and body { ... }, because the resulting CSS rules all require the renderer to unnecessarily check every single element if it is actually a decedent of html and body - which they undoubtedly are.