使用 SASS（不是 SCSS）悬停锚标签

Question

I am trying to learn SASS (not SCSS) and I am following their documentation, but the &hover is not working.我正在尝试学习 SASS（不是 SCSS）并且我正在关注他们的文档，但是&hover不起作用。

SASS:萨斯：

a
  color: red
  &:hover
    color: green

The generated CSS and HTML:生成的 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>

Answer 1

Ok, I am going to put here the complete code, and explain in a different way, maybe it will help you to help me.好的，我把完整的代码放在这里，换一种方式解释，说不定能帮到你。

The behaviour of my tags are not working properly in any of my browsers.我的标签的行为在我的任何浏览器中都无法正常工作。 No errors on my console as well.我的控制台上也没有错误。

Here's the complete code:这是完整的代码：

<!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>

and the SASS document:和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

This SASS is generating the CSS as below:这个 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; }

The problem is: When I open this index file on my browser (either Chrome and Firefox) the tags does not change its color when hover, and even the cursor is not changing for a pointer.问题是：当我在我的浏览器（Chrome 和 Firefox）上打开这个索引文件时，标签在悬停时不会改变它的颜色，甚至光标也没有改变指针。 All the other elements are working perfectly, only the anchor tags have this issue.所有其他元素都运行良好，只有锚标签有这个问题。 It seems to work correctly on code snippet, but I have no idea what is wrong, since the generated css looks correct.它似乎在代码片段上正常工作，但我不知道出了什么问题，因为生成的 css 看起来是正确的。

I Changed my tag to another CSS (normal css) file, just to test, and it worked perfectly.我将我的标签更改为另一个 CSS（普通 css）文件，只是为了测试，它运行良好。

使用 SASS（不是 SCSS）悬停锚标签

问题描述

1 个解决方案

解决方案1
-1 2018-02-24 18:09:08

使用 SASS（不是 SCSS）悬停锚标签

问题描述

1 个解决方案

解决方案1 -1 2018-02-24 18:09:08

解决方案1
-1 2018-02-24 18:09:08