Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

// Palette

$dark-color: #000;
$light-color: #fff;

// Theme mixins

@mixin sg_dark_theme {
  .sg_dark_theme & {
    @content;
  }
}

@mixin sg_foreground_background($foreground-strength: 1, $background-strength: 1) {
  color: rgba($dark-color, $foreground-strength);
  background-color: rgba($light-color, $background-strength);

  @include sg_dark_theme {
    color: rgba($light-color, $background-strength);
    background-color: rgba($dark-color, $foreground-strength);
  }
}

@mixin sg_box_shadow($depth: 20px) {
  box-shadow: 0px 1px $depth rgba($dark-color, 0.6), 
              0px 0px 0px 1px rgba($dark-color, 0.5), 
              0px 0px 0px 1px rgba($light-color, 0.15) inset; // light inset

  @include sg_dark_theme {
    box-shadow: 0px 1px $depth rgba($dark-color, 0.6), 
                0px 0px 0px 1px rgba($dark-color, 0.5), 
                0px 0px 0px 1px rgba($dark-color, 0.15) inset; // dark inset
  }
}

// Component

.my_component {
  @include sg_foreground_background(.5, .75);
  @include sg_box_shadow;
}

.another_component {
  @include sg_foreground_background(.25, .5);
  @include sg_box_shadow(10px);
}

SassMeister-output.css

.my_component {
  color: rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.15) inset;
}

.sg_dark_theme .my_component {
  color: rgba(255, 255, 255, 0.75);
  background-color: rgba(0, 0, 0, 0.5);
}

.sg_dark_theme .my_component {
  box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
}

.another_component {
  color: rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.15) inset;
}

.sg_dark_theme .another_component {
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.25);
}

.sg_dark_theme .another_component {
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
}