Generated by SassMeister.com.

SassMeister-input-HTML.haml

.action_view
.active_record
.action_controller
.sidekiq
.delayed_job
.resque
.rack
.padrino
.active_support
.action_mailer
.mongodb
.moped
.redis
.elasticsearch
.mixpanel
.net_http

SassMeister-input.scss

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

$event_groups: (
  (
    class: "action_view",
    color: #6ba4cb
  ),
  (
    class: "active_record",
    color: #2a5b9d
  ),
  (
    class: "action_controller",
    color: #40b590
  ),
  (
    class: "sidekiq",
    color: #40b590
  ),
  (
    class: "delayed_job",
    color: #40b590
  ),
  (
    class: "resque",
    color: #40b590
  ),
  (
    class: "rack",
    color: #40b590
  ),
  (
    class: "padrino",
    color: #40b590
  ),
  (
    class: "active_support",
    color: darken(#abd9e9, 15%)
  ),
  (
    class: "action_mailer",
    color: #4f6b94
  ),
  (
    class: "mongodb",
    color: #175000
  ),
  (
    class: "moped",
    color: #088a08
  ),
  (
    class: "redis",
    color: #D82A20
  ),
  (
    class: "elasticsearch",
    color: #76BB40
  ),
  (
    class: "mixpanel",
    color: darken(#d19fff,10%)
  ),
  (
    class: "net_http",
    color: #616a61
  ),
);

div {
  width: 200px;
  height: 200px;
  float: left;
}

@each $item in $event_groups {
  &.#{map-get($item, "class")} {
    color: map-get($item, "color");
    
    &::before {
      content: "#{map-get($item, "class")} (#{lightness(map-get($item, "color"))})";
    }
  }
}

SassMeister-output.css

div {
  width: 200px;
  height: 200px;
  float: left;
}

.action_view {
  color: #6ba4cb;
}

.action_view::before {
  content: "action_view (60.78431%)";
}

.active_record {
  color: #2a5b9d;
}

.active_record::before {
  content: "active_record (39.01961%)";
}

.action_controller {
  color: #40b590;
}

.action_controller::before {
  content: "action_controller (48.03922%)";
}

.sidekiq {
  color: #40b590;
}

.sidekiq::before {
  content: "sidekiq (48.03922%)";
}

.delayed_job {
  color: #40b590;
}

.delayed_job::before {
  content: "delayed_job (48.03922%)";
}

.resque {
  color: #40b590;
}

.resque::before {
  content: "resque (48.03922%)";
}

.rack {
  color: #40b590;
}

.rack::before {
  content: "rack (48.03922%)";
}

.padrino {
  color: #40b590;
}

.padrino::before {
  content: "padrino (48.03922%)";
}

.active_support {
  color: #6ebed9;
}

.active_support::before {
  content: "active_support (64.21569%)";
}

.action_mailer {
  color: #4f6b94;
}

.action_mailer::before {
  content: "action_mailer (44.5098%)";
}

.mongodb {
  color: #175000;
}

.mongodb::before {
  content: "mongodb (15.68627%)";
}

.moped {
  color: #088a08;
}

.moped::before {
  content: "moped (28.62745%)";
}

.redis {
  color: #D82A20;
}

.redis::before {
  content: "redis (48.62745%)";
}

.elasticsearch {
  color: #76BB40;
}

.elasticsearch::before {
  content: "elasticsearch (49.21569%)";
}

.mixpanel {
  color: #b96cff;
}

.mixpanel::before {
  content: "mixpanel (71.17647%)";
}

.net_http {
  color: #616a61;
}

.net_http::before {
  content: "net_http (39.80392%)";
}

SassMeister-rendered.html

<div class='action_view'></div>
<div class='active_record'></div>
<div class='action_controller'></div>
<div class='sidekiq'></div>
<div class='delayed_job'></div>
<div class='resque'></div>
<div class='rack'></div>
<div class='padrino'></div>
<div class='active_support'></div>
<div class='action_mailer'></div>
<div class='mongodb'></div>
<div class='moped'></div>
<div class='redis'></div>
<div class='elasticsearch'></div>
<div class='mixpanel'></div>
<div class='net_http'></div>