2013-04-25 20 views
5

Questa potrebbe essere una domanda stupida, ma mi sono imbattuto in questo fantastico CodePen che volevo regolare e utilizzare. Ho lanciato una demo rapida sul mio server ma non ha funzionato. Poi ho capito che accanto a CodePen si diceva SCSS, che ho cercato su Google. Ho capito, ma non so come far funzionare questo particolare codice.Come posso far funzionare Sass?

il codice HTML:

<body> 


    <div id="paper"> </div> 
    <div class="wrap"> 
      <a class="two" href="http://db.tt/vkXgwK2P"> 
       <img class="round" src="http://db.tt/vkXgwK2P" alt=""> 
      </a> 
      <a class="three" href="http://db.tt/Lrtnc768"> 
       <img class="round" src="http://db.tt/Lrtnc768" alt=""> 
      </a> 
      <a class="one" href="http://db.tt/CSVy5HNR"> 
       <img class="round" src="http://db.tt/CSVy5HNR" alt=""> 
      </a> 


      <figure> 
       <img src="http://db.tt/FveX1nYo" alt=""> 
      </figure> 
    </div> 

Lo SCSS:

body { 
    margin: 0; 
} 

#paper { 
    height: 120px; 
    margin: 0; 
    background: #303535; 
} 

.wrap { 
    margin: 0 auto; 
    width: 180px; 
    height: 180px; 
    border-radius: 50%; 
    box-shadow: 0 0 0 10px white; 
    position: relative; 
    top: -80px; 
    background: #fff; 

    a { 
    margin: 0; 
    position: absolute; 
    .round { 
     border-radius: 50%; 
     width: 180px; 
     height: 180px; 
     box-shadow: 0 0 0 10px white; 
    } 
    } 
    figure img { 
    margin: 0; 
    -webkit-transition: top 0.4s ease-out; 
    -moz-transition: top 0.4s ease-out; 
    transition: top 0.4s ease-out; 
    position: absolute;  
    top: 200px; 
    left: 77px; 
    } 
    .two { 
    margin: 0; 

    -webkit-transition: top 0.4s ease-out; 
    -moz-transition: top 0.4s ease-out; 
    transition: top 0.4s ease-out; 
    opacity: 0.8; 
    top: 0; 
    } 
    .three { 
    margin: 0; 
    -webkit-transition: top 0.4s ease-out; 
    -moz-transition: top 0.4s ease-out; 
    transition: top 0.4s ease-out;  
    opacity: 0.8; 
    top: 0; 
    } 
    &:hover .one { 
    opacity: 0.8; 
    } 
    & a.one:hover { 
    opacity: 1; 
    z-index: 2; 
    } 
    :hover .two { 
    top: 300px; 
    } 
    & a.two:hover { 
    opacity: 1; 
    z-index: 2; 
    } 
    &:hover .three { 
    top: 150px; 
    } 
    & a.three:hover { 
    opacity: 1; 
    z-index: 2; 
    } 
    &:hover figure img { 
    top: 500px;  
    } 
} 

C'è anche un esempio di quello che sto cercando di realizzare a CodePen: http://codepen.io/CoffeeCupDrummer/pen/FqChm

Ho pensato che forse il problema era nella sintassi del mio collegamento, quindi ho pensato lo ha fatto per assomigliare a questo, ma quello non ha funzionato neanche. Ho provato style.css poi passato a style.scss nella speranza di risolverlo.

<link rel="stylesheet" href="stylesheet/style.scss"> 

Quindi la mia domanda è che cosa è così diverso SCSS e perché non posso farlo funzionare quando funziona bene su CodePen?

risposta

5

Il problema è che devi compilare il tuo SCSS in CSS. Non ci sono browser che supportano Sass: devi prima compilarlo con un compilatore Sass e poi collegarlo al CSS compilato. Codepen lo fa automaticamente per te.

Come compilare Sass

Ci sono due modi comuni per compilare Sass, entrambi compilare automaticamente il codice ogni volta che si apportano modifiche a essa:

  • utilizzare lo strumento linea di sass di comando che viene fornito con il Sass gem
  • Usa qualche strumento GUI come CodeKit o Compass.App

Vale la pena notare che Codepen viene compilato utilizzando Compass, che consiglio di utilizzare piuttosto che il compilatore di van van Sass. Oltre a fornire funzioni extra e una libreria di utili mix, utilizza un file di configurazione (config.rb) in modo che sia sufficiente eseguire il comando compass watch per compilare al volo mentre si codifica.

Questo suona come un po 'di seccatura, ma ne vale la pena. Compass sfrutta Sass ad un livello completamente nuovo con la sua libreria di mix e un ecosistema di estensioni Compass: grid systems, tools to make your site responsive, maneggevole shortcuts e tools.

Problemi correlati