<div class="box">

  <div class="ruler">

    <div class="inch1"></div>
    <div class="inch2"></div>
    <div class="inch3"></div>
    <div class="inch4"></div>

    <div class="inch5"></div>
    <div class="inch6"></div>
    <div class="inch7"></div>
    <div class="inch8"></div>

    <div class="inch9"></div>
    <div class="inch10"></div>
    <div class="inch11"></div>
    <div class="inch12"></div>

    <div class="half-inch0"></div>
    <div class="half-inch1"></div>

    <div class="half-inch2"></div>
    <div class="half-inch3"></div>
    <div class="half-inch4"></div>

    <div class="half-inch5"></div>
    <div class="half-inch6"></div>
    <div class="half-inch7"></div>
    <div class="half-inch8"></div>

    <div class="half-inch9"></div>
    <div class="half-inch10"></div>
    <div class="half-inch11"></div>
    <div class="half-inch12"></div>

    <div class="text1">1</div>
    <div class="text2">2</div>
    <div class="text3">3</div>
    <div class="text4">4</div>

    <div class="text5">5</div>
    <div class="text6">6</div>
    <div class="text7">7</div>
    <div class="text8">8</div>

    <div class="text9">9</div>
    <div class="text10">10</div>
    <div class="text11">11</div>
    <div class="text12">12</div>

    
    <div class="logo">A</div>
    
  </div>

</div>

$wood: #F4BD8B;
@mixin borders($size, $color) {
  border-top: $size solid $color;
  border-bottom: $size solid $color;
  border-left: $size solid $color;
  border-right: $size solid $color;
}

@mixin divs($width, $height, $color, $rad, $index) {
  position: absolute;
  width: $width;
  height: $height;
  background: $color;
  border-radius: $rad;
  z-index: $index;
}

@mixin positions($top, $right, $bottom, $left) {
  top: $top;
  bottom: $bottom;
  left: $left;
  right: $right;
}

html,
body {
  background: lightblue;
}

.box {
  position: relative;
  display: block;
  margin: auto;
  margin-top: 1%;
  width: 600px;
  height: 420px;
}

.ruler {
  @include divs(100%, 20%, $wood, 10px, 0);
  @include positions(40%, none, none, none);
  border-bottom: 2px solid #FF8111;
  @for $i from 1 through 12 {
    .inch#{$i} {
      @include divs(.5%, 30%, black, 0, 1);
      @include positions(0%, none, none, 7.5%*$i)
    }
  }
  @for $i from 0 through 12 {
    .half-inch#{$i} {
      @include divs(.5%, 20%, black, 0, 1);
      @include positions(0%, none, none, 3.75% + 7.5%*$i)
    }
  }
}

@for $j from 1 through 12 {
  .text#{$j} {
    @include divs(5%, 10%, none, none, 3);
    @include positions(28%, none, none, 7.5%*$j - .5);
  }
}

.logo {
  @include divs(5%, 35%, orange, 50%, 4);
  @include positions(none, 1%, 2%, none);
  
  text-align: center;
}