Generated by SassMeister.com.

SassMeister-input-HTML.html

<a href="#" class="link">Hello World</a>

<div>
  <button class="foo">This is a Button</button>      
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

.link {
  font-size: 2em;
  
  // Set Outline on Focus
  &:focus {
    outline: red auto 5px;
  }
  
  // The Important Bit, Remove Focus on Hover/Active
  &:active,
  &:hover {
    outline: 0;
  }
}

.foo {
  background: 0;
  border: 1px solid black;
  padding: 1em 2em;
  
  // Set Outline on Focus
  &:focus {
    outline: purple auto 5px;
  }
  
  // The Important Bit, Remove Focus on Hover/Active
  &:active,
  &:hover {
    outline: 0;
  }
  
  &:active {
    background: blue;
  }
  
  &:hover {
    cursor: pointer;
  }
}

SassMeister-output.css

.link {
  font-size: 2em;
}
.link:focus {
  outline: red auto 5px;
}
.link:active, .link:hover {
  outline: 0;
}

.foo {
  background: 0;
  border: 1px solid black;
  padding: 1em 2em;
}
.foo:focus {
  outline: purple auto 5px;
}
.foo:active, .foo:hover {
  outline: 0;
}
.foo:active {
  background: blue;
}
.foo:hover {
  cursor: pointer;
}

SassMeister-rendered.html

<a href="#" class="link">Hello World</a>

<div>
  <button class="foo">This is a Button</button>      
</div>