www.mikescher.com/www/data/css/styles_config.scss

$COL_BACKGROUND:        #EEE;
$COL_BACKGROUND_2:      #E0E0E0;
$COL_BACKGROUND_3:      #F8F8F8;
$COL_TEXT_NORMAL:       #CCC;
$COL_TEXT_DARK_DARKER:  #222;
$COL_TEXT_DARK:         #333;
$COL_TEXT_DARK_LIGHTER: #555;
$COL_TRANSPARENT:       #FFFFFF00;

$COL_COMPLEXHOVER_BG:   white;
$COL_COMPLEXHOVER_FG:   black;
$COL_COMPLEXHOVER_BRD:  black;

$COL_GITHUB:            #4078C0;
$COL_HIGHLIGHT_RED:     #442222;
$COL_HIGHLIGHT_BLUE:    #222244;

$FONT_HEADER: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
$FONT_CODE: Consolas, Monaco, "Courier New", Menlo, monospace;
$FONT_DEFAULT: serif;


// [0] ResponsiveDesign Minimal Mobile
//     content_width = auto
//     header        = vertical
$RD_0_MINIMOBILE_MIN:   0px; /* 400px */
$RD_0_MINIMOBILE_MAX: 767px;

// [1] ResponsiveDesign Normal Mobile
//     content_width = auto
//     header        = vertical
$RD_1_NORMMOBILE_MIN: 768px;
$RD_1_NORMMOBILE_MAX: 850px;

// [2] ResponsiveDesign Small Desktop
//     content_width = auto
//     header        = vertical
$RD_2_SMALLDESKTOP_MIN: 851px;
$RD_2_SMALLDESKTOP_MAX: 991px;

// [3] ResponsiveDesign Medium Desktop
//     content_width = auto
//     header        = vertical
$RD_3_MEDDESKTOP_MIN: 992px;
$RD_3_MEDDESKTOP_MAX: 1199px;

// [4] ResponsiveDesign Large Desktop
//     content_width = auto
//     header        = vertical
$RD_4_LARGEDESKTOP_MIN: 1200px;
$RD_4_LARGEDESKTOP_MAX: 99999px;

@function rdmedia_expr($min, $max) {

  $w1: "";
  $w2: "";

  @if ($min == 0) { $w1: $RD_0_MINIMOBILE_MIN;   }
  @if ($min == 1) { $w1: $RD_1_NORMMOBILE_MIN;   }
  @if ($min == 2) { $w1: $RD_2_SMALLDESKTOP_MIN; }
  @if ($min == 3) { $w1: $RD_3_MEDDESKTOP_MIN;   }
  @if ($min == 4) { $w1: $RD_4_LARGEDESKTOP_MIN; }

  @if ($max == 0) { $w2: $RD_0_MINIMOBILE_MAX;   }
  @if ($max == 1) { $w2: $RD_1_NORMMOBILE_MAX;   }
  @if ($max == 2) { $w2: $RD_2_SMALLDESKTOP_MAX; }
  @if ($max == 3) { $w2: $RD_3_MEDDESKTOP_MAX;   }
  @if ($max == 4) { $w2: $RD_4_LARGEDESKTOP_MAX; }

  @if (($min == 0) and ($max == 4)) { @return "(all)"; }
  @if ($min == 0 ) { @return "(max-width:"+$w2+")"; }
  @if ($max == 4 ) { @return "(min-width:"+$w1+")"; }

  @return "(min-width:"+$w1+") and (max-width:"+$w2+")";
}

@mixin rdmedia_range($min, $max) {
  @media #{rdmedia_expr($min, $max)}
  {

    @content;

  }
}

@mixin rdmedia($lvl) {
  @media #{rdmedia_expr($lvl, $lvl)}
  {

    @content;

  }
}