style SCSS ne s'applique

-1

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

Voici comment mon HTML ressemble et ci-dessous est le SCSS que j'ai écritstyle SCSS ne s'applique

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

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

    div{ 

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

    } 

}

Mais le style ne s'applique. J'ai suivi le guide scss, mais ça ne marche pas.

Source

2017-09-20 user6792790

Il devrait fonctionner à moins que vous n'avez pas compilé le fichier '.scss' – masterpreenz

Vous nichant' # firstRow' intérieur de 'div', créer le sélecteur 'div # firstRow'. Si vous comprenez le CSS de base, vous saurez pourquoi cela ne sélectionne aucun élément sur votre page. –

" manquant dans l'ID tag <div id="firstRow">

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

mis à jour script SCSS, vous faites référence enfant élément div de #firstRow dans SCSS mais HTML référence même élément.

$ font-stack: Helvetica, sans-serif; $ couleur primaire: # 333;

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

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

}

Ou changer votre code HTML comme ci-dessous

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

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

Source

2017-09-20 01:32:40

Vous ne travaillez toujours pas? –

Script SCSS mis à jour vérifier maintenant –

Pourquoi mettre un vote négatif? –

style SCSS ne s'applique

Répondre

Questions connexes