如何编译Sass

Question

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

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上工作正常时不能让它工作？

Answer 1

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

如何编译Sass

有两种常见的方法可以编译Sass，无论何时对它们进行更改，它们都会自动编译代码：

使用Sass gem

sass

使用某些GUI工具，例如CodeKit或Compass.App

值得注意的是Codepen使用Compass进行编译，我建议使用grid systems而不是vanilla Sass编译器。除了提供额外的函数和有用的mixin库之外，它还使用配置文件（config.rb）文件，这样您只需运行compass watch命令即可在编码时动态编译。 / p>

这听起来有点麻烦，但值得您光顾。 Compass利用它的mixins库和Compass扩展的生态系统将Sass提升到一个全新的水平：tools to make your site responsive，shortcuts，方便的tools和{{3}}。

我如何让Sass工作？

1 个答案:

如何编译Sass