使用 SASS（不是 SCSS）悬停锚标记答案

【问题标题】：Hover an anchor tag using SASS (not SCSS)使用 SASS（不是 SCSS）悬停锚标记
【发布时间】：2018-02-25 02:09:08
【问题描述】：

我正在尝试学习 SASS（不是 SCSS）并且我正在关注他们的文档，但 &hover 不起作用。

SASS：

a
  color: red
  &:hover
    color: green

生成的 CSS 和 HTML：

a {
  color: red; }
  a:hover {
    color: green; }

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

【问题讨论】：

你看过生成的 CSS 了吗？
是的，它看起来很完美：a { color: red; } a:hover { 颜色：绿色； }
那你为什么认为它不起作用？看看我刚刚插入的sn-p；问题一定出在其他地方。
即使光标指针也不起作用。这种方式我已经做了很久了，之前从来没有遇到过这个问题，刚才巧合的是我用的是SASS
你是什么意思“甚至光标指针”？目前尚不清楚您认为问题出在哪里， sn-p 的行为与我预期的完全一样。

标签： css sass hover

【解决方案1】：

好的，我把完整的代码放在这里，换一种方式解释，也许对你有帮助。

我的标签行为在我的任何浏览器中都无法正常工作。我的控制台上也没有错误。

这是完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SASS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <header>
    <h1>Hi this is a test</h1>
  </header>

<article>
  <h2><a href="">about me</a></h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus ducimus delectus, quod, itaque odio nostrum molestiae, reiciendis ipsum nobis nihil, placeat excepturi repudiandae aspernatur enim quisquam dicta fuga! Corrupti!</p>

  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
  </ul>
</article>

<footer>
  <p>copyright 2018 jorge</p>
</footer>
</body>
</html>

和 SASS 文档：

//SASS

// VARIABLES

$black:  #333
$pale:  #d2e1dd
$pink:  #c69
$blue:  #036

$font-stack:  'Andale Mono', monospace
$font-size:  14px

// MIXINS
=circleThing($rad, $height, $width, $bg, $color)
  -webkit-border-radius: $rad
  -moz-border-radius: $rad
  -ms-border-radius: $rad
  -o-border-radius: $rad
  border-radius: $rad

  height: $height
  width: $width

  line-height: $height
  text-align: center

  background: $bg
  color: $color
  margin: 0 auto


// STYLES


body
  background: $pale
  color: $black
  font-family: $font-stack
  font-size: $font-size

article
  background: white
  width: 760px
  margin: -60px auto
  padding: 40px
  box-sizing: border-box
  position: relative
  z-index: -2

a
  color: red
  &:hover
    color: green


header
  +circleThing(100%, 200px, 200px, $blue, white)
  h1
    font-size: $font-size + 2

footer
  +circleThing(100%, 150px, 150px, $black, $pale)
  font-size: $font-size - 3
  position: relative
  z-index: -4
  margin-top: -60px

这个 SASS 生成的 CSS 如下：

body {
  background: #d2e1dd;
  font-family: "Andale Mono", monospace;
  font-size: 14px; }

article {
  background: white;
  width: 760px;
  margin: -60px auto;
  padding: 40px;
  box-sizing: border-box;
  position: relative;
  z-index: -2; }

a {
  color: red; }
  a:hover {
    color: green; }

header {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  height: 200px;
  width: 200px;
  line-height: 200px;
  text-align: center;
  background: #036;
  color: white;
  margin: 0 auto; }
  header h1 {
    font-size: 16px; }

footer {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  height: 150px;
  width: 150px;
  line-height: 150px;
  text-align: center;
  background: #333;
  color: #d2e1dd;
  margin: 0 auto;
  font-size: 11px;
  position: relative;
  z-index: -4;
  margin-top: -60px; }

问题是：当我在浏览器（Chrome 和 Firefox）上打开这个索引文件时，标签在悬停时不会改变颜色，甚至光标也不会改变指针。所有其他元素都运行良好，只有锚标签有这个问题。它似乎在代码 sn-p 上正常工作，但我不知道出了什么问题，因为生成的 css 看起来是正确的。

我将我的标签更改为另一个 CSS（普通 css）文件，只是为了测试，它运行良好。

【讨论】：