Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="mosaic">
  <div class="tile tile-1"></div>
  <div class="tile tile-2"></div>
  <div class="tile tile-3"></div>
  <div class="tile tile-4"></div>
  <div class="tile tile-5"></div>
  <div class="tile tile-6"></div>
  <div class="tile tile-7"></div>
  <div class="tile tile-8"></div>
  <div class="tile tile-9"></div>
  <div class="tile tile-10"></div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/*
 0       1       2       3       4
0+-------+-------+-------+-------+
 |       |       |       |       |
 |       |       |       |       |
1+-------------------------------+
 |       |       |       |       |
 |       |       |       |       |
2+-------------------------------+
 |       |       |       |       |
 |       |       |       |       |
3+-------------------------------+
 |       |       |       |       |
 |       |       |       |       |
4+-------+-------+-------+-------+
*/

$grid-layout: (4, 4);

$mosaic: (
  (
    location: (0, 0),
    size: (2, 2)
  ),
  (
    location: (2, 0),
    size: (1, 1)
  ),
  (
    location: (2, 1),
    size: (1, 1)
  ),
  (
    location: (3, 0),
    size: (1, 1)
  ),
  (
    location: (3, 1),
    size: (1, 1)
  ),
  (
    location: (0, 2),
    size: (1, 1)
  ),
  (
    location: (0, 3),
    size: (1, 1)
  ),
  (
    location: (1, 2),
    size: (2, 2)
  ),
  (
    location: (3, 2),
    size: (1, 1)
  ),
  (
    location: (3, 3),
    size: (1, 1)
  )
);

@for $i from 1 through length($mosaic) {
  $attributes: nth($mosaic, $i);
  
  .tile-#{$i} {
    background: rgba(#f00, (100 - $i * 10) / 100);
    top: percentage(nth(map-get($attributes, location), 2) / nth($grid-layout, 2));
    left: percentage(nth(map-get($attributes, location), 1) / nth($grid-layout, 1));
    width: percentage(nth(map-get($attributes, size), 1) / nth($grid-layout, 1));
    height: percentage(nth(map-get($attributes, size), 2) / nth($grid-layout, 2));
    
    &:after {
      content: '#{$i}';
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -10px 0 0 -10px;
    }
  }
}

.mosaic {
  background: palegoldenrod;
  height: 300px;
  width: 500px;
  position: relative;
}

.tile {
  position: absolute;
}

SassMeister-output.css

/*
 0       1       2       3       4
0+-------+-------+-------+-------+
 |       |       |       |       |
 |       |       |       |       |
1+-------------------------------+
 |       |       |       |       |
 |       |       |       |       |
2+-------------------------------+
 |       |       |       |       |
 |       |       |       |       |
3+-------------------------------+
 |       |       |       |       |
 |       |       |       |       |
4+-------+-------+-------+-------+
*/
.tile-1 {
  background: rgba(255, 0, 0, 0.9);
  top: 0%;
  left: 0%;
  width: 50%;
  height: 50%;
}

.tile-1:after {
  content: "1";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

.tile-2 {
  background: rgba(255, 0, 0, 0.8);
  top: 0%;
  left: 50%;
  width: 25%;
  height: 25%;
}

.tile-2:after {
  content: "2";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

.tile-3 {
  background: rgba(255, 0, 0, 0.7);
  top: 25%;
  left: 50%;
  width: 25%;
  height: 25%;
}

.tile-3:after {
  content: "3";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

.tile-4 {
  background: rgba(255, 0, 0, 0.6);
  top: 0%;
  left: 75%;
  width: 25%;
  height: 25%;
}

.tile-4:after {
  content: "4";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

.tile-5 {
  background: rgba(255, 0, 0, 0.5);
  top: 25%;
  left: 75%;
  width: 25%;
  height: 25%;
}

.tile-5:after {
  content: "5";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

.tile-6 {
  background: rgba(255, 0, 0, 0.4);
  top: 50%;
  left: 0%;
  width: 25%;
  height: 25%;
}

.tile-6:after {
  content: "6";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

.tile-7 {
  background: rgba(255, 0, 0, 0.3);
  top: 75%;
  left: 0%;
  width: 25%;
  height: 25%;
}

.tile-7:after {
  content: "7";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

.tile-8 {
  background: rgba(255, 0, 0, 0.2);
  top: 50%;
  left: 25%;
  width: 50%;
  height: 50%;
}

.tile-8:after {
  content: "8";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

.tile-9 {
  background: rgba(255, 0, 0, 0.1);
  top: 50%;
  left: 75%;
  width: 25%;
  height: 25%;
}

.tile-9:after {
  content: "9";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

.tile-10 {
  background: rgba(255, 0, 0, 0);
  top: 75%;
  left: 75%;
  width: 25%;
  height: 25%;
}

.tile-10:after {
  content: "10";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

.mosaic {
  background: palegoldenrod;
  height: 300px;
  width: 500px;
  position: relative;
}

.tile {
  position: absolute;
}

SassMeister-rendered.html

<div class="mosaic">
  <div class="tile tile-1"></div>
  <div class="tile tile-2"></div>
  <div class="tile tile-3"></div>
  <div class="tile tile-4"></div>
  <div class="tile tile-5"></div>
  <div class="tile tile-6"></div>
  <div class="tile tile-7"></div>
  <div class="tile tile-8"></div>
  <div class="tile tile-9"></div>
  <div class="tile tile-10"></div>
</div>