Im using Foundation by Zurb as a front-end framework. Below is the SCSS used to generate the basic layout of the homepage using the Semantic Grid Mixins Foundation supplies (http://foundation.zurb.com/docs/sass-mixins.php). The problem I am having is that it is creating massive selectors when I view them in the inspector in Chrome.body.homepage div[role=main] {  header {    @include outerRow();    margin-bottom: 60px!important;    h1 { @include column(12); }  }  & > section {    margin-bottom: 120px!important;  }  .hero_container {    @include outerRow();    .video_holder {      @include column(5);      @include mobileColumn(4);    }    form {      @include column(7);      @include mobileColumn(4);      legend {  }      .personal_details {        @include innerRow();        label {          @include column(6);        }      }      .form_actions {        @include innerRow();        label { @include column(6); }        .input_action { @include column(6); }      }    }  }  .reasons {    @include outerRow();    ul {      list-style: none;      li {        @include column(4);        @include mobileColumn(2);        margin-bottom: $halfColumnGutter;        p {          padding: 12px;          border: 1px solid #eee;          background: #efefef;        }      }    }  }  .testimonials {    @include outerRow();    h4 { @include column(12); }    ul {      list-style: none;      blockquote { @include column(3); @include mobileColumn(2); border-left: none; }      p {        padding: 12px;        border: 1px solid #eee;        background: #efefef;      }    }  }  .register {    @include outerRow();    form {      @include column(12);      .personal_details {        @include innerRow();        margin-bottom: $halfColumnGutter;        label {          @include column(4);        }      }      .extra_info {        @include innerRow();        margin-bottom: $halfColumnGutter;        label {          @include column(4);        }      }      .form_actions {        @include innerRow();        label { @include column(4); }        .input_action { @include offsetBy(4); @include column(2); }      }    }  }}body.homepage.mobile div[role=main] {  .hero_container {    form { margin-top: $halfColumnGutter; }  }}Below is the output from the Chrome inspector when viewing the label in .personal_details.top_bar .information_for_agencies, .top_bar .registration, header[role=banner] .branding, header[role=banner] .branding .logo, header[role=banner] .branding .tagline, header[role=banner] div[role=navigation], footer[role=contentinfo] section, body.full_width div[role=main] article[role=article], body.full_width div[role=main] article[role=article] header img.top_masthead, body.full_width div[role=main] article[role=article] div.content img.top_left, body.full_width div[role=main] article[role=article] div.content img.top_right, body.full_width div[role=main] article[role=article] div.content figure.left_align, body.full_width div[role=main] article[role=article] div.content figure.right_align, body.full_width div[role=main] article[role=article] div.content figure.full_width, body.full_width div[role=main] article[role=article] footer img.bottom_masthead, body.two_columns div[role=main] article[role=article], body.two_columns div[role=main] article[role=article] header img.top_masthead, body.two_columns div[role=main] article[role=article] div.content img.top_left, body.two_columns div[role=main] article[role=article] div.content img.top_right, body.two_columns div[role=main] article[role=article] div.content figure.left_align, body.two_columns div[role=main] article[role=article] div.content figure.right_align, body.two_columns div[role=main] article[role=article] div.content figure.full_width, body.two_columns div[role=main] article[role=article] footer img.bottom_masthead, body.two_columns div[role=main] aside[role=complementary], body.three_columns div[role=main] section.adverts, body.three_columns div[role=main] article[role=article], body.three_columns div[role=main] article[role=article] header img.top_masthead, body.three_columns div[role=main] article[role=article] div.content img.top_left, body.three_columns div[role=main] article[role=article] div.content img.top_right, body.three_columns div[role=main] article[role=article] div.content figure.left_align, body.three_columns div[role=main] article[role=article] div.content figure.right_align, body.three_columns div[role=main] article[role=article] div.content figure.full_width, body.three_columns div[role=main] article[role=article] footer img.bottom_masthead, body.three_columns div[role=main] aside[role=complementary], body.homepage div[role=main] header h1, body.homepage div[role=main] .hero_container .video_holder, body.homepage div[role=main] .hero_container form, body.homepage div[role=main] .hero_container form .personal_details label, body.homepage div[role=main] .hero_container form .form_actions label, body.homepage div[role=main] .hero_container form .form_actions .input_action, body.homepage div[role=main] .reasons ul li, body.homepage div[role=main] .testimonials h4, body.homepage div[role=main] .testimonials ul blockquote, body.homepage div[role=main] .register form, body.homepage div[role=main] .register form .personal_details label, body.homepage div[role=main] .register form .extra_info label, body.homepage div[role=main] .register form .form_actions label, body.homepage div[role=main] .register form .form_actions .input_action {position: relative;min-height: 1px;padding: 0 15px;}The guidelines for scss say not to go more than five levels deep, which I haven't. Is it something I am doing wrong? how can I write it more efficiently? 
Innefficient scss selectors being generated
css;sass