Question

我有针对社交链接的Stylus规则：

a
    color #fff
    display block
    width @height
    line-height @height
    text-align center
    border-radius (@height/ 2)
    &.fa-facebook
        background #5d82d2
    &.fa-twitter
        background #3dbff1
    &.fa-google
        background #eb5e4c
    &.fa-tumblr
        background #426e9d
    &.fa-linkedin
        background #248cc9
    &.fa-instagram
        background #5389b5

它们都有不同的背景颜色。现在我希望每个链接都将其颜色更改为Stylus lighten(@background, 40%)。我怎么能不把它复制/粘贴到每个项目中？我应该使用mixins还是有更基本的解决方案？

Answer 1

您可以使用哈希来存储社交链接的颜色，然后使用循环来获取所有值，包括悬停的值，如下所示：

$social-links = {
  facebook: #5d82d2
  twitter: #3dbff1
  google: #eb5e4c
  tumblr: #426e9d
  linkedin: #248cc9
  instagram: #5389b5
}

a
  for $social-link, $social-link-color in $social-links
    &.fa-{$social-link}
      background: $social-link-color

      &:hover
        background: lighten($social-link-color, 40%)

使用Stylus动态设置悬停背景

1 个答案: