Skip to content

SASS Code Review Checklist


Sr No.CheckReference
1There should be default / global folder for variables, mixins etc.
  • _font.scss
  • _global.scss
  • _mixin.scss
  • _reset.scss
  • _variables.scss
2There should be modules folder for section wise partial files if sections are used in multiple pages
  • _banner.scss
  • _header.scss
  • _footer.scss
3There should be pages folder for page wise partial files if page styling is unique.
  • _about.scss
  • _page-not-found.scss
4Strictly use Variables for Colors, Breakpoints, Font Family, Font Size, Font Weight. Use Object variables if possibleEg:
in _variables.scss
$colors: ( primary-color: #00497e, secondary-color: #00487d, );
use in any partial files
.content { background-color: map-get($colors, primary-color); }
5Create mixins to reuse it in all partial files. Use mixins wherever possible and do not create unnecessary mixins, if not used, remove it.
6Use meaningful class and IDs
7Use extends / placeholders for repeated styling
8Nesting must be upto 6 levels.
9& operator should be used for selecting parent and pseudo selectors.Eg:
a { color: $black; &:hover { opacity: .8; }}
10Operators( +,-,*,/,%) : This mathematical operators should be used for calculating % valuesEg:
a { width: $fullWidth / 2; /* $fullWidth: 100%; defined in _variables.scss */ }
11Comment your code if necessary, because partial files names are already self explanatory.
  • Omit unit specification after ""0"" values.
  • Do not use units (px) after 0 values unless they are required.
margin: 0; padding: 0;
13Omit leading ""0""s in values.Eg:
Instead of
font-size: 0.8px;
font-size: .8px;
14Use 3 character hexadecimal notation where possible./* Not recommended */
color: #eebbcc;
#eebbcc= hexadecimal notation.
/* Recommended */
color: #ebc;
#ebc= hexadecimal notation.
15Follow Codecop : Declarations are to be consistently ordered; box-model, display, positioning and etc..selector {/* Box Model */box-sizing: border-box;width: 100px;height: 100px;padding: 10px;border: 10px solid #333;margin: 10px;/* Display */display: inline-block;overflow: hidden;float: left;/* Positioning */position: absolute;z-index: 10;top: 0;right: 0;bottom: 0;left: 0;/* Other (in alphabetical order) */background: #000;color: #fff;font-family: sans-serif;font-size: 16px;text-align: right;opacity: 0;outline: none; }
Note: Commenting in the above code is just for reference