Generated by SassMeister.com.

SassMeister-input-HTML.html

<link rel="stylesheet" href="http://buildwithbeard.com/css/app.css"></link>

<a href="#" class="bg1:2 tc1:2 ft4 pv2 ph3 dib">Click Me</a>

SassMeister-input.scss

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

$bg1: #222;
$bg2: #FF0000;

$tc1: #CCC;
$tc2: #FFF;

.bg1\:2 {
  background-color: $bg1;
  
  &:hover {
    background-color: $bg2; 
  }
}

.tc1\:2 {
  color: $tc1;
  
  &:hover {
    color: $tc2; 
  }
}

SassMeister-output.css

.bg1\:2 {
  background-color: #222;
}

.bg1\:2:hover {
  background-color: #FF0000;
}

.tc1\:2 {
  color: #CCC;
}

.tc1\:2:hover {
  color: #FFF;
}

SassMeister-rendered.html

<link rel="stylesheet" href="http://buildwithbeard.com/css/app.css"></link>

<a href="#" class="bg1:2 tc1:2 ft4 pv2 ph3 dib">Click Me</a>