這可能是一個愚蠢的問題，但我偶然發現了這個令人敬畏的CodePen，我想調整和使用。我在自己的服務器上啓動了一個快速演示，但它不起作用。然後我意識到，CodePen旁邊是SCSS，我用Google搜索了一下。我喜歡它，但我不知道如何使這個特定的代碼工作。如何讓Sass工作？

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

的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;  
    } 
}

還有什麼我想實現在CodePen一個例子：http://codepen.io/CoffeeCupDrummer/pen/FqChm

我想也許這個問題是在我的鏈接語法，所以我說ged它看起來像這樣，但那也不起作用。我試過style.css，然後切換到style.scss，希望修復它。

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

所以我的問題是關於什麼SCSS如此不同，爲什麼我不能得到它時，它適用於CodePen就好了工作？

來源

2013-04-25 Cassie Todd

問題是你必須將你的SCSS編譯成CSS。沒有支持Sass的瀏覽器：您必須先使用Sass編譯器進行編譯，然後鏈接到已編譯的CSS。 Codepen會自動爲你做這件事。

如何編譯薩斯

有兩種常見的方法來編譯無禮的話，他們都自動編譯代碼時，你對它進行更改：

使用sass命令行工具，自帶在Sass gem
使用一些GUI工具像CodeKit或Compass.App

值得注意的是，Codepen使用Compass編譯，我推薦使用它而不是sass編譯器。除了提供額外的功能和一個有用的mixin庫之外，它還使用一個配置文件（config.rb）文件，以便您只需運行compass watch命令即可在編碼時即時編譯。

這聽起來有點麻煩，但它是值得的。 Compass通過它的mixin庫和Compass擴展的生態系統將Sass提升到了一個全新的高度：grid systems，tools to make your site responsive，方便的shortcuts和tools。

來源

2013-04-25 07:35:34

如何讓Sass工作？

回答

如何編譯薩斯

相關問題