Best practice for sass

The project front end is using vue vuex and sass. So here are sole rules about best practice:

  • Variable – can be used for standard layout, e.g. margin border font and coler
  • Nest – Regarding different modules, nest structure is easy to search and the structure is clear. It’s good for component dev
  • Reuse – reusing of the same include will lead to code redundancy

e.g.

@mixin clearfix{
 
  &:before,&:after{
 
    display:block;
    content:'';
    height:0;
    clear:both;
  }
 
}
 
.container{
    @include clearfix;   
}
 
.tab{
    @include clearfix;
}

instead of the above code, we should do:

@mixin clearfix{
 
  &:before,&:after{
 
    display:block;
    content:'';
    height:0;
    clear:both;
  }
}
 
.container,.tab{
    @include clearfix;   
}