One SCSS file to rule them all

01_utils.scss

// So you have co-workers who love raving about buzzwords like Semantic styles, unobstructive css, BEM etc 
// which never made sense?
//
// Drop this into your project, grab some popcorn and hit commit. 
//
// Now the screams begin ...

@each $dim in 5, 10, 20 {
  @each $attr-key, $attr in (m: margin, p: padding) {
	  .u-#{$attr-key}#{$dim} { #{$attr}: #{$dim}px; }
	  @each $dir-key, $dir in (t: top, r: right, b: bottom, l:left) {
	    .u-#{$attr-key}#{$dir-key}#{$dim}{
		    #{$attr}-#{$dir}: #{$dim}px;
	    }
	  }
  }
}

@each $dir-key, $dir in (l: left, r: right, c: center) {
  .u-t#{$dir-key} { text-align: $dir }
}

$dirs: (top, right, left, bottom);

@each $pack-dir in $dirs {
  .u-pack-#{$pack-dir} {
    position: absolute;
    @each $stick-dir in $dirs {
      @if $pack-dir != $stick-dir {
        #{$stick-dir}: 0;
      }
    }
  }
  .u-pack-all {
    position: absolute;
    @each $stick-dir in $dirs { #{$stick-dir}: 0; }
  }
}

@for $fs from 1 through 6 {
  .u-fs#{$fs} { font-size: #{$fs}em; }
  .u-fs#{$fs}-5 { font-size: #{$fs}.5em; }
}

02_utils.css

.u-m5 {
  margin: 5px;
}

.u-mt5 {
  margin-top: 5px;
}

.u-mr5 {
  margin-right: 5px;
}

.u-mb5 {
  margin-bottom: 5px;
}

.u-ml5 {
  margin-left: 5px;
}

.u-p5 {
  padding: 5px;
}

.u-pt5 {
  padding-top: 5px;
}

.u-pr5 {
  padding-right: 5px;
}

.u-pb5 {
  padding-bottom: 5px;
}

.u-pl5 {
  padding-left: 5px;
}

.u-m10 {
  margin: 10px;
}

.u-mt10 {
  margin-top: 10px;
}

.u-mr10 {
  margin-right: 10px;
}

.u-mb10 {
  margin-bottom: 10px;
}

.u-ml10 {
  margin-left: 10px;
}

.u-p10 {
  padding: 10px;
}

.u-pt10 {
  padding-top: 10px;
}

.u-pr10 {
  padding-right: 10px;
}

.u-pb10 {
  padding-bottom: 10px;
}

.u-pl10 {
  padding-left: 10px;
}

.u-m20 {
  margin: 20px;
}

.u-mt20 {
  margin-top: 20px;
}

.u-mr20 {
  margin-right: 20px;
}

.u-mb20 {
  margin-bottom: 20px;
}

.u-ml20 {
  margin-left: 20px;
}

.u-p20 {
  padding: 20px;
}

.u-pt20 {
  padding-top: 20px;
}

.u-pr20 {
  padding-right: 20px;
}

.u-pb20 {
  padding-bottom: 20px;
}

.u-pl20 {
  padding-left: 20px;
}

.u-tl {
  text-align: left;
}

.u-tr {
  text-align: right;
}

.u-tc {
  text-align: center;
}

.u-pack-top {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
}

.u-pack-all {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.u-pack-right {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.u-pack-all {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.u-pack-left {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.u-pack-all {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.u-pack-bottom {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.u-pack-all {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.u-fs1 {
  font-size: 1em;
}

.u-fs1-5 {
  font-size: 1.5em;
}

.u-fs2 {
  font-size: 2em;
}

.u-fs2-5 {
  font-size: 2.5em;
}

.u-fs3 {
  font-size: 3em;
}

.u-fs3-5 {
  font-size: 3.5em;
}

.u-fs4 {
  font-size: 4em;
}

.u-fs4-5 {
  font-size: 4.5em;
}

.u-fs5 {
  font-size: 5em;
}

.u-fs5-5 {
  font-size: 5.5em;
}

.u-fs6 {
  font-size: 6em;
}

.u-fs6-5 {
  font-size: 6.5em;
}