Sass-Dinge für Links

Avatar of Chris Coyier
Chris Coyier am

via Alex King, Sie können Variablen für Selektoren verwenden

$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;
}

Sie können sogar so verschachteln, hier wird es noch nützlicher

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

via Reggie Dawson, Sie könnten auch ein @mixin erstellen, um Dinge für Sie zu erstellen. Beachten Sie, dass diese Link-Pseudo-Stile generell ein großartiger Anwendungsfall für Verschachtelung sind.

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

Das Compass-Add-on bietet ein Mixin

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