最近折腾着想搞个自己的小站，展示展示平时写的一些小玩意儿。琢磨一圈，发现用 Sass 来写样式挺方便的，就动手搞起来。今天就跟大家分享一下我的实践过程。

准备工作

我先得把环境给搭起来。因为之前没怎么接触过 Sass，所以先去查查资料。发现要用 Sass，得先装个这玩意儿。

我用的是 Windows 系统，所以就按着网上的教程，下个安装包，一路点下来，就算是装好。

你也可以选择用其他方式安装，比如通过 npm：

npm install -g sass

或者，如果你用的是 Mac，那用 brew 安装更方便：

brew install sass

装好之后，可以在命令行里敲个 sass -v 看看版本号，能显示出来就说明安装成功。

开始搭建

环境有，接下来就是建站。我这里没用那些复杂的框架，就直接新建个文件夹，打算从零开始搞。

在文件夹里，我先创建一个 文件，作为网站的首页。然后又新建一个 文件，准备在里面写样式。

在 里，我随便写点内容，主要是为看看效果。然后在 里，我开始尝试用 Sass 的语法来写样式。

刚开始用，感觉 Sass 的嵌套写法挺有意思的，比以前写 CSS 方便多。比如，我要给一个 div 里的 p 标签设置样式，可以直接这样写：

div {
p {
color: red;

这样写出来的代码，层次感很清晰，一眼就能看出来各个元素之间的关系。

编译 Sass

写好 Sass 代码，还得把它编译成浏览器能识别的 CSS 才行。这时候，之前安装的 Sass 就派上用场。

我在命令行里，切换到 文件所在的目录，然后输入：

sass * *

这样，Sass 就会自动把 编译成 文件。然后在 里，把这个 文件引进来就行。

每次修改 文件，都得重新编译一下，有点麻烦。后来我发现，Sass 还有个 --watch 参数，可以自动监听文件的变化，只要一保存，就会自动编译。这样就省事多。

sass --watch * *

成果展示

经过一番折腾，我的小站总算是有点样子。虽然功能还很简单，但好歹是用 Sass 搭起来的，也算是一个小小的成就。

这回实践，让我对 Sass 有更直观的解。感觉这玩意儿确实挺好用的，以后写样式就靠它。

这回分享就到这里，希望能对大家有所帮助。也欢迎大家一起来交流学习，共同进步！