Question

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

SASS：

a
  color: red
  &:hover
    color: green

生成的CSS和HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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）上打开此索引文件时，标签在悬停时不会改变颜色，甚至光标也不会改变指针。所有其他元素都完美地工作，只有锚标签有这个问题。它似乎在代码片段上正常工作，但我不知道出了什么问题，因为生成的css看起来是正确的。

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

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

1 个答案: