Sass 链接技巧

Avatar of Chris Coyier
Chris Coyier

来自 Alex King,您可以使用变量来表示选择器

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

您甚至可以像这样嵌套,这使得它更加有用

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

来自 Reggie Dawson,您也可以创建一个 @mixin 来构建您的内容。请注意,这些链接伪样式通常非常适合嵌套。

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

Compass 附加组件 提供 一个 mixin

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