Generated by SassMeister.com.

input.scss

// principles/sizes
$magic: 2;
$base: 16;

@function s($value) {
    @return $value / $base + 0rem
}

@function set-color($color) {
    @if (lightness( $color ) > 40) {
      @return darken($color, 80%);
    }
    @else {
      @return lighten($color, 85%);
    }
}

@mixin random-bgr(){
  $background: rgb(random(255), random(255), random(255));
  background: $background;
  color: set-color($background);
}


$spacing-size: s($base / $magic);
$spacing-size--increased: s(($base / $magic) * $magic);
$spacing-size--decreased: s(($base / $magic)/$magic);

$font-size--increased: s($base + $magic * $magic);
$font-size--decreased: s($base / $magic * 1.5);

html {
    font-size: 100%;
}

body {
    font-size: $base * 1px;
}

body {
    font-family: Roboto;
    font-weight: 400;
    margin: 0;
    padding: 0;
    line-height: 1 + (1 * ($base / 100));
}

.--space {
    margin: $spacing-size;
}

.--font-large {
    font-size: $font-size--increased;
}

.--font-small {
    font-size: $font-size--decreased;
}

%grid {
    display: flex;
    align-items: flex-start;
    flex: 1 1 100%;
    flex-wrap: wrap;
}

.g-row {
    @extend %grid;
    flex-direction: row;
}

.g-col {
    @extend %grid;
    flex-direction: column;
}

.box {
    width: 100px;
    background: cyan;
}

.box {
  border-radius: ($magic) * 1px;
  padding: $spacing-size;
}

$num-colors: 100;

@for $i from 0 to $num-colors {
    .--color-#{$i}) {
      @include random-bgr();
    }
}

markup.html

<p class="--font-small">SMALL Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Sed ac dolor sit amet purus malesuada congue. Vestibulum fermentum tortor id mi. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Proin in tellus sit amet nibh dignissim sagittis. Cras elementum. Suspendisse nisl. Curabitur bibendum justo non orci. Duis viverra diam non justo. Aliquam ante. Donec vitae arcu.</p>
<p>NORMAL Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Sed ac dolor sit amet purus malesuada congue. Vestibulum fermentum tortor id mi. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Proin in tellus sit amet nibh dignissim sagittis. Cras elementum. Suspendisse nisl. Curabitur bibendum justo non orci. Duis viverra diam non justo. Aliquam ante. Donec vitae arcu.</p>
<p class="--font-large">LARGE Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Sed ac dolor sit amet purus malesuada congue. Vestibulum fermentum tortor id mi. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Proin in tellus sit amet nibh dignissim sagittis. Cras elementum. Suspendisse nisl. Curabitur bibendum justo non orci. Duis viverra diam non justo. Aliquam ante. Donec vitae arcu.</p>

<hr>

<div class="g-row">
  <div class="box --space --font-small --color-10">Small font-size</div>
  <div class="box --space --font-small --color-20">Small font-size</div>
  <div class="box --space --color-10">Normal font-size</div>
  <div class="box --space --color-10">Normal font-size</div>
  <div class="box --space --font-large --color-15">Large font-size</div>
  <div class="box --space --font-large --color-7">Large font-size</div>
</div>

<hr>

<div class="g-row">
  <!-- .box.--space.--color-${I am label n.$}*20 -->
  <div class="box --space --color-1">I am label n.1</div>
  <div class="box --space --color-2">I am label n.2</div>
  <div class="box --space --color-3">I am label n.3</div>
  <div class="box --space --color-4">I am label n.4</div>
  <div class="box --space --color-5">I am label n.5</div>
  <div class="box --space --color-6">I am label n.6</div>
  <div class="box --space --color-7">I am label n.7</div>
  <div class="box --space --color-8">I am label n.8</div>
  <div class="box --space --color-9">I am label n.9</div>
  <div class="box --space --color-10">I am label n.10</div>
  <div class="box --space --color-11">I am label n.11</div>
  <div class="box --space --color-12">I am label n.12</div>
  <div class="box --space --color-13">I am label n.13</div>
  <div class="box --space --color-14">I am label n.14</div>
  <div class="box --space --color-15">I am label n.15</div>
  <div class="box --space --color-16">I am label n.16</div>
  <div class="box --space --color-17">I am label n.17</div>
  <div class="box --space --color-18">I am label n.18</div>
  <div class="box --space --color-19">I am label n.19</div>
  <div class="box --space --color-20">I am label n.20</div>
</div>

output.css

html {
  font-size: 100%;
}

body {
  font-size: 16px;
}

body {
  font-family: Roboto;
  font-weight: 400;
  margin: 0;
  padding: 0;
  line-height: 1.16;
}

.--space {
  margin: 0.5rem;
}

.--font-large {
  font-size: 1.25rem;
}

.--font-small {
  font-size: 0.75rem;
}

.g-row, .g-col {
  display: flex;
  align-items: flex-start;
  flex: 1 1 100%;
  flex-wrap: wrap;
}

.g-row {
  flex-direction: row;
}

.g-col {
  flex-direction: column;
}

.box {
  width: 100px;
  background: cyan;
}

.box {
  border-radius: 2px;
  padding: 0.5rem;
}

.--color-0 {
  background: #eb8a64;
  color: black;
}

.--color-1 {
  background: #261587;
  color: white;
}

.--color-2 {
  background: #1b07ee;
  color: black;
}

.--color-3 {
  background: #34b1b5;
  color: black;
}

.--color-4 {
  background: #78296a;
  color: white;
}

.--color-5 {
  background: #eebf6f;
  color: black;
}

.--color-6 {
  background: #4ce1e4;
  color: black;
}

.--color-7 {
  background: #11b8d1;
  color: black;
}

.--color-8 {
  background: #4af946;
  color: black;
}

.--color-9 {
  background: #c905fc;
  color: black;
}

.--color-10 {
  background: #acae75;
  color: black;
}

.--color-11 {
  background: #0599f4;
  color: black;
}

.--color-12 {
  background: #a47e87;
  color: black;
}

.--color-13 {
  background: #51ba7b;
  color: black;
}

.--color-14 {
  background: #9af3d8;
  color: black;
}

.--color-15 {
  background: #c7e015;
  color: black;
}

.--color-16 {
  background: #9fc703;
  color: white;
}

.--color-17 {
  background: #a725f8;
  color: black;
}

.--color-18 {
  background: #405cf1;
  color: black;
}

.--color-19 {
  background: #888959;
  color: black;
}

.--color-20 {
  background: #c80677;
  color: black;
}

.--color-21 {
  background: #4a4b10;
  color: white;
}

.--color-22 {
  background: #e1b33b;
  color: black;
}

.--color-23 {
  background: #d90fe8;
  color: black;
}

.--color-24 {
  background: #f84e86;
  color: black;
}

.--color-25 {
  background: #205b94;
  color: white;
}

.--color-26 {
  background: #5de7db;
  color: black;
}

.--color-27 {
  background: #1e2889;
  color: white;
}

.--color-28 {
  background: #c7b0ee;
  color: #030105;
}

.--color-29 {
  background: #caad85;
  color: black;
}

.--color-30 {
  background: #ad0e12;
  color: white;
}

.--color-31 {
  background: #df8dd4;
  color: black;
}

.--color-32 {
  background: #1024e4;
  color: black;
}

.--color-33 {
  background: #20fdfe;
  color: black;
}

.--color-34 {
  background: #7d1f19;
  color: white;
}

.--color-35 {
  background: #629e99;
  color: black;
}

.--color-36 {
  background: #ad8ba7;
  color: black;
}

.--color-37 {
  background: #375349;
  color: white;
}

.--color-38 {
  background: #8d37e5;
  color: black;
}

.--color-39 {
  background: #aa32b5;
  color: black;
}

.--color-40 {
  background: #b5af44;
  color: black;
}

.--color-41 {
  background: #2a614d;
  color: white;
}

.--color-42 {
  background: #14e398;
  color: black;
}

.--color-43 {
  background: #be45d3;
  color: black;
}

.--color-44 {
  background: #6e3020;
  color: white;
}

.--color-45 {
  background: #781d63;
  color: white;
}

.--color-46 {
  background: #3788ca;
  color: black;
}

.--color-47 {
  background: #e250bf;
  color: black;
}

.--color-48 {
  background: #217148;
  color: white;
}

.--color-49 {
  background: #350441;
  color: #fdf8ff;
}

.--color-50 {
  background: #45e4c1;
  color: black;
}

.--color-51 {
  background: #81ebd8;
  color: black;
}

.--color-52 {
  background: #d07c75;
  color: black;
}

.--color-53 {
  background: #e97b51;
  color: black;
}

.--color-54 {
  background: #8d2153;
  color: white;
}

.--color-55 {
  background: #de4b7b;
  color: black;
}

.--color-56 {
  background: #1b016b;
  color: white;
}

.--color-57 {
  background: #092f4c;
  color: white;
}

.--color-58 {
  background: #2dac9c;
  color: black;
}

.--color-59 {
  background: #848919;
  color: white;
}

.--color-60 {
  background: #e5dc0b;
  color: black;
}

.--color-61 {
  background: #6973cb;
  color: black;
}

.--color-62 {
  background: #9bd29d;
  color: black;
}

.--color-63 {
  background: #3dc366;
  color: black;
}

.--color-64 {
  background: #466354;
  color: white;
}

.--color-65 {
  background: #c16474;
  color: black;
}

.--color-66 {
  background: #8351bb;
  color: black;
}

.--color-67 {
  background: #b084d8;
  color: black;
}

.--color-68 {
  background: #8b65e3;
  color: black;
}

.--color-69 {
  background: #59dd42;
  color: black;
}

.--color-70 {
  background: #7c164c;
  color: white;
}

.--color-71 {
  background: #a30817;
  color: white;
}

.--color-72 {
  background: #978996;
  color: black;
}

.--color-73 {
  background: #74f9af;
  color: black;
}

.--color-74 {
  background: #ce3a99;
  color: black;
}

.--color-75 {
  background: #131e2e;
  color: #f7f9fc;
}

.--color-76 {
  background: #32d9f5;
  color: black;
}

.--color-77 {
  background: #57b0c4;
  color: black;
}

.--color-78 {
  background: #3664b7;
  color: black;
}

.--color-79 {
  background: #4d62ac;
  color: black;
}

.--color-80 {
  background: #a33f61;
  color: black;
}

.--color-81 {
  background: #9c5c66;
  color: black;
}

.--color-82 {
  background: #ae7b3b;
  color: black;
}

.--color-83 {
  background: #ca165a;
  color: black;
}

.--color-84 {
  background: #b72e95;
  color: black;
}

.--color-85 {
  background: #983521;
  color: white;
}

.--color-86 {
  background: #dda127;
  color: black;
}

.--color-87 {
  background: #ac3212;
  color: white;
}

.--color-88 {
  background: #476433;
  color: white;
}

.--color-89 {
  background: #23c0db;
  color: black;
}

.--color-90 {
  background: #cd8216;
  color: black;
}

.--color-91 {
  background: #a90505;
  color: white;
}

.--color-92 {
  background: #059cca;
  color: black;
}

.--color-93 {
  background: #d0806c;
  color: black;
}

.--color-94 {
  background: #dd0752;
  color: black;
}

.--color-95 {
  background: #91037f;
  color: white;
}

.--color-96 {
  background: #4a1b35;
  color: white;
}

.--color-97 {
  background: #99fe34;
  color: black;
}

.--color-98 {
  background: #d7e48d;
  color: black;
}

.--color-99 {
  background: #69fb1f;
  color: black;
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}