Question

这似乎是一个基本问题，但我无法在任何地方找到答案。如何为SASS链接设置普通和悬停样式？

我想在一个地方控制所有链接的默认和悬停样式，并且能够传递这个变量＆＃39; （或者无论正确的话是什么）我的CSS中的不同选择器。

与下面的代码类似但我想在第一行控制默认和悬停样式。所以稍后如果我希望这些链接具有：活动样式，我可以在页面顶部添加一次。

$primary-color: #333;

.some-class {
  color: $primary-color;
}

.some-class-other-class {
  color: $primary-color;
}

Answer 1

您可以尝试：

a{
    &:link, &:hover{
        color: $primary-color;
    }
    &:active{
        color: $other-color;
    }
}

Answer 2

这有效：

@mixin style-1 {
    background: red;
    &:hover {
        background: $blue
    }
}

.something {
    @include style-1;
}

.something-else {
    @include style-1;
}

.something-else-again {
    @include style-1;
}

Answer 3

任何选择器的解决方案：

&,
&:hover {
  color: red;
}

例如

.my-class {
  &,
  &:hover {
    color: red;
  }
}

如果您只想定位所有链接：

a, a:hover {
  color: red;
}

使用SASS设置普通和悬停样式

3 个答案: