Question

我开始学习Sass并开始检查一些嵌套示例。这是我尝试过的第一个没有用的东西：

body {background:#eee;}

.blog .entry {
    p{
        color:#ff0;
    }
}

这是我的标记：

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.scss">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    </head>
    <body class="blog">
        <div class="entry">
            <h1>My blog post</h1>
            <p class="blue">Text <a>link</a></p>
        </div><!-- .entry -->
    </body>
</html>

身体的背景确实变为#eee，但段落保持不变（除非我将它取消嵌套到p {}）。

Answer 1

首先你不能像CSS一样链接SCSS文件，你必须将它编译成CSS然后链接编译的文件。为了在SCSS中正确嵌套，您可以执行以下操作：

.blog {
  .entry {
      p{
          color:#ff0;
      }
  }
}

Answer 2

您可以在此处看到标记和Sass工作：https://jsfiddle.net/6pa0r48g/

如果您的css规则被另一个规则超载（请参见格式.blue），请直接检查已编译的CSS。

这也更具可读性：

body {
    background: #eee;
}

.blog {
    .entry {
        p {
            color: #ff0;
        }
    }
}

我建议你不要再深入了解Sass。

为什么这个基本的Sass嵌套示例不起作用？

2 个答案: