Sass Things for Links

Avatar of Chris Coyier
Chris Coyier on

via Alex King, you can use variables for selectors:

$a-tags: 'a, a:active, a:hover, a:visited';
$a-tags-hover: 'a:active, a:hover';
 
#{$a-tags} {
  color: red;
  text-decoration: none;
}
#{$a-tags-hover} {
  color: blue;
}

You can even nest like that, which is where this gets even more useful:

.module {
  #{$a-tags} {
    color: blue;
    text-decoration: none;
  } 
}

via Reggie Dawson, you could also make a @mixin to build things out for you. Note that these link pseudo styles are a great use-case for nesting in general.

@mixin linx ($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
    &:hover {
      color: $hover;   
    }
    &:active {
      color: $active;
    }
  }
}

The Compass add-on offers a mixin:

@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);