Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// Taken from https://github.com/heygrady/scss-blend-modes/blob/master/stylesheets/_blend-modes.scss
@function blend-normal ($foreground, $background) {
  $opacity: opacity($foreground);
  $background-opacity: opacity($background);

  // calculate opacity
  $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
  $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
  $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
  @return rgb($bm-red, $bm-green, $bm-blue);
}

$page-bg-color: #ddd;
$page-text-color: #333;
$page-link-color: #1659b4;

$invert-bg-color: #222;
$invert-text-color: white;
$invert-link-color: #f3499a;

body {
	background-color: $page-bg-color;
	color: $page-text-color;
}

a {
  color: $page-link-color;
  
  &:active {
    color: blend-normal(rgba($page-link-color, 0.7), $page-bg-color);
    //opacity: 0.7;
  }
}

.article_dark {
	background-color: $invert-bg-color;
	color: $invert-text-color;
}

.article_dark a {
  color: $invert-link-color;
  
  &:active {
    color: blend-normal(rgba($invert-link-color, 0.7), $invert-bg-color);
    //opacity: 0.7;
  }
}

SassMeister-output.css

body {
  background-color: #dddddd;
  color: #333333;
}

a {
  color: #1659b4;
}
a:active {
  color: #5180c0;
}

.article_dark {
  background-color: #222222;
  color: white;
}

.article_dark a {
  color: #f3499a;
}
.article_dark a:active {
  color: #b43d76;
}