我如何使Sass工作？

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

html：

SCSS：

正文{
保证金：0；
}
#纸{
高度：120px；
保证金：0；
背景:#303535；
}
.包裹{
保证金：0自动；
宽度：180px；
高度：180像素；
边界半径：50%；
盒影：0 10px白色；
位置：相对位置；
顶部：-80px；
背景：#fff；
a{
保证金：0；
位置：绝对位置；
.轮{
边界半径：50%；
宽度：180px；
高度：180像素；
盒影：0 10px白色；
}
}
图img{
保证金：0；
-webkit过渡：前0.4s轻松推出；
-moz过渡：前0.4s缓解；
过渡：前0.4s缓解；
位置：绝对位置；
顶部：200px；
左：77px；
}
.二{
保证金：0；
-webkit过渡：前0.4s轻松推出；
-moz过渡：前0.4s缓解；
过渡：前0.4s缓解；
不透明度：0.8；
排名：0；
}
.三{
保证金：0；
-webkit过渡：前0.4s轻松推出；
-moz过渡：前0.4s缓解；
过渡：前0.4s缓解；
不透明度：0.8；
排名：0；
}
&：悬停{
不透明度：0.8；
}
&第一：悬停{
不透明度：1；
z指数：2；
}
：悬停{
顶部：300px；
}
&第二：悬停{
不透明度：1；
z指数：2；
}
&：悬停{
顶部：150px；
}
&第三：悬停{
不透明度：1；
z指数：2；
}
&：悬停图形img{
顶部：500px；
}
}

还有一个例子说明了我在CodePen努力实现的目标：

我想可能是我的链接语法出了问题，所以我把它改成这样，但也没用。我尝试了style.css，然后切换到style.scs，希望能够修复它

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

---

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

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

如何编译Sass 有两种常见的编译SAS的方法，它们都会在您对代码进行更改时自动编译代码：

• 使用随附的

  sass

  命令行工具
• 使用一些GUI工具，如或

值得注意的是，Codepen使用编译，我建议使用它，而不是普通的Sass编译器。除了提供额外的函数和有用的mixin库之外，它还使用了一个配置文件（

config.rb

）文件，这样您只需运行

compass watch

命令即可在编写代码时进行动态编译

这听起来有点麻烦，但值得一试。Compass通过其mixin库和Compass扩展的生态系统将Sass利用到了一个全新的水平：、方便和高效