title: resizing multiple divs in absolute positioning
body: <p>I have a small problem, I have 4 divs that have a fixed width and height of 50px and positioned absolute. The sample layout is 2 x 2.</p>
  
  <p>They are manually positioned with 10px gap in between them. The problem is if I need to resize the boxes, I will have to resize them individually and recalculate the space in between since they are absolute positioning and will get worse the more divs I have. I was told that Sass may help me solve this issue. So I am trying to use Sass to help but I am not sure how to go about doing this.</p>
  
  <p>An example:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="test.css"/&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="section"&gt;
          &lt;div class="box" id="box-position-1"&gt;&lt;/div&gt;
          &lt;div class="box" id="box-position-2"&gt;&lt;/div&gt;
          &lt;div class="box" id="box-position-3"&gt;&lt;/div&gt;
          &lt;div class="box" id="box-position-4"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.section {
      position: relative;
  }
  
  .box {
      width: 50px;
      height: 50px;
      position: absolute;
      border: 1px solid #000;
  }
  
  #box-position-3,
  #box-position-4 {
      top: 60px;
  }
  
  #box-position-2,
  #box-position-4 {
      left: 60px;
  }
  </code></pre>