Generated by SassMeister.com.

SassMeister-input.scss

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

// Table of Contents
// 1. Color Generator by @pankajparashar
// 2. Content Level generator by @donuteeze


// ==========================================================================
// Title:        1. Color Generator
// ==========================================================================

$named-colors: 'AliceBlue', 'AntiqueWhite', 'Aqua', 'Aquamarine', 'Azure', 'Beige', 'Bisque', 'Black', 'BlanchedAlmond', 'Blue', 'BlueViolet', 'Brown', 'BurlyWood', 'CadetBlue', 'Chartreuse', 'Chocolate', 'Coral', 'CornflowerBlue', 'Cornsilk', 'Crimson', 'Cyan', 'DarkBlue', 'DarkCyan', 'DarkGoldenRod', 'DarkGray', 'DarkGrey', 'DarkGreen', 'DarkKhaki', 'DarkMagenta', 'DarkOliveGreen', 'Darkorange', 'DarkOrchid', 'DarkRed', 'DarkSalmon', 'DarkSeaGreen', 'DarkSlateBlue', 'DarkSlateGray', 'DarkSlateGrey', 'DarkTurquoise', 'DarkViolet', 'DeepPink', 'DeepSkyBlue', 'DimGray', 'DimGrey', 'DodgerBlue', 'FireBrick', 'FloralWhite', 'ForestGreen', 'Fuchsia', 'Gainsboro', 'GhostWhite', 'Gold', 'GoldenRod', 'Gray', 'Grey', 'Green', 'GreenYellow', 'HoneyDew', 'HotPink', 'IndianRed', 'Indigo', 'Ivory', 'Khaki', 'Lavender', 'LavenderBlush', 'LawnGreen', 'LemonChiffon', 'LightBlue', 'LightCoral', 'LightCyan', 'LightGoldenRodYellow', 'LightGray', 'LightGrey', 'LightGreen', 'LightPink', 'LightSalmon', 'LightSeaGreen', 'LightSkyBlue', 'LightSlateGray', 'LightSlateGrey', 'LightSteelBlue', 'LightYellow', 'Lime', 'LimeGreen', 'Linen', 'Magenta', 'Maroon', 'MediumAquaMarine', 'MediumBlue', 'MediumOrchid', 'MediumPurple', 'MediumSeaGreen', 'MediumSlateBlue', 'MediumSpringGreen', 'MediumTurquoise', 'MediumVioletRed', 'MidnightBlue', 'MintCream', 'MistyRose', 'Moccasin', 'NavajoWhite', 'Navy', 'OldLace', 'Olive', 'OliveDrab', 'Orange', 'OrangeRed', 'Orchid', 'PaleGoldenRod', 'PaleGreen', 'PaleTurquoise', 'PaleVioletRed', 'PapayaWhip', 'PeachPuff', 'Peru', 'Pink', 'Plum', 'PowderBlue', 'Purple', 'Red', 'RosyBrown', 'RoyalBlue', 'SaddleBrown', 'Salmon', 'SandyBrown', 'SeaGreen', 'SeaShell', 'Sienna', 'Silver', 'SkyBlue', 'SlateBlue', 'SlateGray', 'SlateGrey', 'Snow', 'SpringGreen', 'SteelBlue', 'Tan', 'Teal', 'Thistle', 'Tomato', 'Turquoise', 'Violet', 'Wheat', 'White', 'WhiteSmoke', 'Yellow', 'YellowGreen';

@function randomizeColor(){
  $color: (
    octal: (
      red: random(256)-1,
      green: random(256)-1,
      blue: random(256)-1
    ),
    percent: (
      red: random(101)-1,
      green: random(101)-1,
      blue: random(101)-1,
      saturation: random(101)-1,
      light: random(101)-1
    ),
    deg: (
      hue: random(361)-1
    ),
    fraction: (
      alpha: random(100)/100
    )
  );
  @return $color;
}

@function color($base, $component) {
  $color: randomizeColor();
  @return map-get(map-get($color, $base), $component);
}

@function getRandomColor($format: NULL) {
  @if $format == "hex" {
    @return rgb(color(octal, red), color(octal, green), color(octal, blue));
  }
  @else if $format == "rgb" { 
    @return unquote("rgb(#{color(octal, red)}, #{color(octal, green)}, #{color(octal, blue)})");
  }
  @else if $format == "%rgb" { 
    @return unquote("rgb(#{color(percent, red)}%, #{color(percent, green)}%, #{color(percent, blue)}%)");
  }
  @else if $format == "rgba" { 
    @return unquote("rgba(#{color(octal, red)}, #{color(octal, green)}, #{color(octal, blue)}, #{color(fraction, alpha)})");
  }
  @else if $format == "%rgba" { 
    @return unquote("rgba(#{color(percent, red)}%, #{color(percent, green)}%, #{color(percent, blue)}%, #{color(fraction, alpha)})");
  }
  @else if $format == "hsl" { 
    @return unquote("hsl(#{color(deg, hue)}, #{color(percent, saturation)}%, #{color(percent, light)}%)");
  }
  @else if $format == "hsla" { 
    @return unquote("hsla(#{color(deg, hue)}, #{color(percent, saturation)}%, #{color(percent, light)}%, #{color(fraction, alpha)})");
  }
  @else { 
    @return nth($named-colors, random(147));
  }
}


// ==========================================================================
// Title:        2. Content Level
// ==========================================================================

@mixin content-levels($minLevel: 1, $maxLevels: 10, $startFromLevel: 0, $step: 25, $levelSelector: '&.level', $contentSelector: '.node-box-content') {
    $level: null;
    $levelIterator: 0;
    
    @for $i from $minLevel through $maxLevels {
          @if $startFromLevel > $i {
            $level: 0;
          } @else {
            $levelIterator: $levelIterator + 1;
            $level: $step * $levelIterator;
          }
        #{$levelSelector}-#{$i} {
            #{$contentSelector} {
                padding-left: $level + px;
                @content;
            }
        }
    }
}

.node-box {
    @include content-levels($minLevel: 0, 
        $maxLevels: 10, 
        $startFromLevel: 3,
        $step: 15, 
        $levelSelector: '&.level', 
        $contentSelector: '.node-box-content'
    ) {
      background: getRandomColor();
    }
}

SassMeister-output.css

.node-box.level-0 .node-box-content {
  padding-left: 0px;
  background: "DarkGrey";
}

.node-box.level-1 .node-box-content {
  padding-left: 0px;
  background: "LightSkyBlue";
}

.node-box.level-2 .node-box-content {
  padding-left: 0px;
  background: "MediumBlue";
}

.node-box.level-3 .node-box-content {
  padding-left: 15px;
  background: "Tomato";
}

.node-box.level-4 .node-box-content {
  padding-left: 30px;
  background: "MediumTurquoise";
}

.node-box.level-5 .node-box-content {
  padding-left: 45px;
  background: "LemonChiffon";
}

.node-box.level-6 .node-box-content {
  padding-left: 60px;
  background: "PaleTurquoise";
}

.node-box.level-7 .node-box-content {
  padding-left: 75px;
  background: "SpringGreen";
}

.node-box.level-8 .node-box-content {
  padding-left: 90px;
  background: "HotPink";
}

.node-box.level-9 .node-box-content {
  padding-left: 105px;
  background: "YellowGreen";
}

.node-box.level-10 .node-box-content {
  padding-left: 120px;
  background: "YellowGreen";
}