【问题标题】：How do I make Sass work?如何让 Sass 工作？
【发布时间】：2016-03-23 08:57:24
【问题描述】：

这可能是一个愚蠢的问题，但我偶然发现了我想要调整和使用的这个很棒的 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 上正常工作？

【问题讨论】：

标签： sass

【解决方案1】：

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

如何编译 Sass

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

使用Sass gem 附带的sass 命令行工具
使用一些 GUI 工具，例如 CodeKit 或 Compass.App

值得注意的是，Codepen 使用 Compass 编译，我建议使用它而不是 vanilla Sass 编译器。除了提供额外的功能和有用的 mixin 库外，它还使用配置文件 (config.rb) 文件，因此您只需运行 compass watch 命令即可在编写代码时即时编译。

这听起来有点麻烦，但值得您花时间。 Compass 通过其 mixin 库和 Compass 扩展生态系统将 Sass 提升到一个全新的水平：grid systems、tools to make your site responsive、方便的shortcuts 和tools。

【讨论】：