CODEWITHSUNDEEP
htmlcsssasscss-selectors
user6792790
user6792790

Reputation: 688

scss styling not getting applied

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

Here is how my HTML looks like and the below is the scss that I wrote

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

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

  div{

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

  }

}

But the style is not getting applied. I followed the scss guide, but it is not working.

Upvotes: 0

Views: 6134

Answers (1)

Kalaikumar Thangasamy
Kalaikumar Thangasamy

Reputation: 564

" missing in the <div id="firstRow"> tag 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>

Updated SCSS script, you are referring div element child of #firstRow in SCSS but HTML refer same element.

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

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

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

}

Or change your HTML code like below

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

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

Upvotes: 4

Related Questions