6

这可能是一个愚蠢的问题，但我偶然发现了我想要调整和使用的这个很棒的 CodePen。我在自己的服务器上启动了一个快速演示，但没有成功。然后我意识到 CodePen 旁边是 SCSS，我用谷歌搜索了它。我有点明白了，但我不知道如何使这个特定的代码工作。

的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

我认为问题可能出在我的链接语法中，所以我将其更改为如下所示，但这也不起作用。我尝试了 style.css 然后切换到 style.scss 希望修复它。

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

所以我的问题是 SCSS 有什么不同，为什么我不能让它在 CodePen 上正常工作？

4

1 回答 1

7

问题是你必须将你的 SCSS 编译成 CSS。没有支持 Sass 的浏览器：您必须先用 Sass 编译器编译它，然后链接到编译后的 CSS。Codepen 会自动为您完成这项工作。

如何编译 Sass

编译 Sass 有两种常见的方法，当你对代码进行更改时，它们都会自动编译你的代码：

It's worth noting that Codepen compiles using Compass, which I recommend using rather than the vanilla Sass compiler. In addition to providing extra functions and a library of useful mixins, it uses a configuration file (config.rb) file so that you just have to run the compass watch command to compile on the fly as you code.

This sounds like a bit of a hassle, but it's worth your while. Compass leverages Sass to a whole new level with it's library of mixins and an ecosystem of Compass extensions: grid systems, tools to make your site responsive, handy shortcuts and tools.

于 2013-04-25T07:35:34.563 回答