I've been learning Sass recently and I've made a small project to master key concepts. I've tried to use placeholder to make different styles of boxes. I have a few questions:is the project generally correct (metodology, semantics, sassstructure)?is it right to use nested style in placeholder (.icon in %feature-boxin my case)? If not, how can I address this problem?for .feature-box-icon-right and .feature-box-icon-left i've made newblock formatting context by adding 'overflow: hidden' to paragraph inorder to leave space under icon blank but I've repeated the line indeclarations; how can I make it better?Here's a pen.Here's the HTML for one section:<section id=icons-left>  <h2>Icons on the left</h2>  <div class=container>    <div class=feature-box-icon-left>      <i class=icon ion-flag></i>      <h3 class=title>Some title</h3>      <!-- /.title -->      <p class=content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>      <!-- /.content -->    </div>    <!-- /.feature-box -->    <div class=feature-box-icon-left>      <i class=icon ion-compose></i>      <h3 class=title>Some title</h3>      <!-- /.title -->      <p class=content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>      <!-- /.content -->    </div>    <!-- /.feature-box -->    <div class=feature-box-icon-left>      <i class=icon ion-refresh></i>      <h3 class=title>Some title</h3>      <!-- /.title -->      <p class=content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>      <!-- /.content -->    </div>    <!-- /.feature-box -->    <div class=feature-box-icon-left>      <i class=icon ion-checkmark></i>      <h3 class=title>Some title</h3>      <!-- /.title -->      <p class=content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>      <!-- /.content -->    </div>    <!-- /.feature-box -->    <div class=feature-box-icon-left>      <i class=icon ion-search></i>      <h3 class=title>Some title</h3>      <!-- /.title -->      <p class=content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>      <!-- /.content -->    </div>    <!-- /.feature-box -->    <div class=feature-box-icon-left>      <i class=icon ion-paper-airplane></i>      <h3 class=title>Some title</h3>      <!-- /.title -->      <p class=content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>      <!-- /.content -->    </div>    <!-- /.feature-box -->  </div>  <!-- /.container --></section><!-- /#icons-left -->Sass@import 'compass';@import 'compass/reset';$bg-color: #efefef;$color-primary: #090;$color-secondary: #333;$container-width: 960px;$feature-box-width: 33.333%;$feature-box-gutter: 15px;$icon-font-size: 50px;$icon-margin: 15px;* {  box-sizing: border-box;}body {  background: $bg-color;  font: {    family: 'Open Sans', sans-serif;    size: 14px;    weight: 300;  }  line-height: 20px;}h1,h2,h3,h4,h5,h6 {  margin: 7px 0;  font-weight: 600;  color: $color-primary;}h2 {  font-size: 25px;  line-height: 30px;}h3 {  font-size: 20px;  line-height: 25px;}section {  padding: 30px 0;  h2 {    text-align: center;    background: darken($bg-color, 10%);    padding: 10px 0;  }}.container {  max-width: $container-width;  margin: 0 auto;  @include clearfix;}%feature-box {  width: $feature-box-width;  padding: $feature-box-gutter;  float: left;  .icon {    font-size: $icon-font-size;    color: $color-primary;  }  &.offset {    margin-left: $feature-box-width;  }}.feature-box-icon-left {  @extend %feature-box;  .icon {    float: left;    margin-right: $icon-margin;  }  .title,  .content {    overflow: hidden;  }}.feature-box-icon-right {  @extend %feature-box;  .icon {    float: right;    margin-left: $icon-margin;  }  .title,  .content {    overflow: hidden;    text-align: right;  }}.feature-box-icon-top {  @extend %feature-box;  text-align: center;}Complied CSShtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {  margin: 0;  padding: 0;  border: 0;  font: inherit;  font-size: 100%;  vertical-align: baseline;}html {  line-height: 1;}ol, ul {  list-style: none;}table {  border-collapse: collapse;  border-spacing: 0;}caption, th, td {  text-align: left;  font-weight: normal;  vertical-align: middle;}q, blockquote {  quotes: none;}q:before, q:after, blockquote:before, blockquote:after {  content: ;  content: none;}a img {  border: none;}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {  display: block;}* {  box-sizing: border-box;}body {  background: #efefef;  font-family: 'Open Sans', sans-serif;  font-size: 14px;  font-weight: 300;  line-height: 20px;}h1,h2,h3,h4,h5,h6 {  margin: 7px 0;  font-weight: 600;  color: #090;}h2 {  font-size: 25px;  line-height: 30px;}h3 {  font-size: 20px;  line-height: 25px;}section {  padding: 30px 0;}section h2 {  text-align: center;  background: #d6d6d6;  padding: 10px 0;}.container {  max-width: 960px;  margin: 0 auto;  overflow: hidden;  *zoom: 1;}.feature-box-icon-left, .feature-box-icon-right, .feature-box-icon-top {  width: 33.333%;  padding: 15px;  float: left;}.feature-box-icon-left .icon, .feature-box-icon-right .icon, .feature-box-icon-top .icon {  font-size: 50px;  color: #090;}.offset.feature-box-icon-left, .offset.feature-box-icon-right, .offset.feature-box-icon-top {  margin-left: 33.333%;}.feature-box-icon-left .icon {  float: left;  margin-right: 15px;}.feature-box-icon-left .title,.feature-box-icon-left .content {  overflow: hidden;}.feature-box-icon-right .icon {  float: right;  margin-left: 15px;}.feature-box-icon-right .title,.feature-box-icon-right .content {  overflow: hidden;  text-align: right;}.feature-box-icon-top {  text-align: center;}
Styling different icon positions in boxes with Sass
html;css;sass