未应用 scss 样式答案

【问题标题】：scss styling not getting applied未应用 scss 样式
【发布时间】：2018-02-28 21:52:46
【问题描述】：

<body>

    <div id="nav">
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#history">History</a></li>
            <li><a href="#projects">Projects</a></li>
        </ul>
    </div>   

    <div id="firstRow>
        <a id="about" class="smooth"></a>
        About page goes here.
    </div> 

    ...

    <script src="bundle.js" type="text/javascript"></script>
</body>

这是我的 HTML 的样子，下面是我编写的 scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;

  div{

    #firstRow {
    height: 100px;
    background-color: green;
  }

  }

}

但是样式没有得到应用。我遵循了 scss 指南，但它不起作用。

【问题讨论】：

除非你没有编译 .scss 文件，否则它应该可以工作
您将#firstRow 嵌套在div 中，从而创建了选择器div #firstRow。如果您了解基本的 CSS，您就会知道为什么没有选择页面上的任何元素。

标签： html css sass css-selectors

【解决方案1】：

<div id="firstRow"> 标签 ID 中缺少"

<body>

  <div id="nav">
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#history">History</a></li>
            <li><a href="#projects">Projects</a></li>
        </ul>
    </div>   

    <div id="firstRow">
        <a id="about" class="smooth"></a>
        About page goes here.
    </div> 

    ...

    <script src="bundle.js" type="text/javascript"></script>
</body>

更新了 SCSS 脚本，您在 SCSS 中引用了#firstRow 的 div 元素子元素，但 HTML 引用了相同的元素。

$font-stack: Helvetica, sans-serif; $primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;

  div#firstRow {
    height: 100px;
    background-color: green;
  }

}

或更改您的 HTML 代码，如下所示

<div>
    <a id="about" class="smooth"></a>

    <div id="firstRow">
      About page goes here.
    </div>
</div>

【讨论】：