Windows上设置Sass

现在有很多信息在预处理器上浮动。大部分信息都面向Mac用户，所以在这篇文章中，我提供了一个非常简单的指南，帮助基于Windows的开发人员快速启动并运行Sass（我选择的预处理器）。

本文是在此博客上的CSS Basics类别下提交的，但任何已经在Windows上使用Sass的开发人员也可以添加他们的反馈。

总的来说，即使你在命令行上这样做，Sass也不难设置。但是，如果您没有兴趣完成所有这些步骤，但仍想在Windows上使用Sass，那么，请跳到本文中的最后一个标题，以获取可让您在Windows上以最少的设置开始使用Sass的应用程序列表。

1.安装Ruby

因为Sass是一个Ruby gem，所以你需要做的第一件事是使用Windows安装程序安装Ruby 。与OS X不同，默认情况下不在Windows上安装Ruby，因此Windows用户需要手动安装它。

当您完成安装向导时，您将进入此选项屏幕：

据我所知，你需要检查的唯一选项是中间选项，它可以帮助你的命令行指令识别在哪里找到（如它所说）“Ruby可执行文件”。否则，当您尝试在命令提示符下安装Sass时，您将收到错误消息“ruby未被识别为内部或外部命令”（请参阅下一步）。

如果有人对此设置的特定方面有任何其他相关信息，请注释，我会相应更新。但这对于第一步应该足够了。

2.使用命令提示符安装Sass

现在您已经安装了Ruby，您将能够安装Sass。为此，请通过执行以下操作之一打开命令提示符：

单击开始 - >运行，然后键入“cmd”; 要么
单击开始 - >所有程序 - >附件，然后选择“命令提示符”

命令提示符打开后，通过在提示符中键入以下内容来安装Sass：

gem install sass

然后点击“输入”，等待安装Sass。完成后应该如下所示：

如果你想获得Compass的额外好处，Compass是一个使用Sass的创作框架，你可以选择做“gem install compass”，它将同时安装Compass和Sass。我不会在这里详细介绍Compass的详细信息，但是一旦你开始使用Sass，你就可以通过谷歌了解一些信息。

3.设置Sass文件

现在已经安装了Ruby和Sass，你想告诉Sass你正在处理什么文件并让它从你的Sass文件中编译你的CSS。

在命令提示符下，使用Sass语法导航到要编写CSS的文件夹。这不是关于命令行语法的教程，所以如果你从未这样做过，你必须自己解决这个问题。您可以查看此链接或只是在谷歌搜索有关简单命令行表达式的教程。

以下是导航到我的文件夹后我的提示的处理方式：

请注意，我已使用“cd”或“change directory”命令导航以找到我正在使用的文件夹。

现在，使用Windows资源管理器，进入该文件夹并创建一个扩展名为“.scss”的新CSS文件。因此，您只需在扩展程序的前面添加“s”，而不是通常的“.css”扩展名。您可以通过创建常规CSS文件和更改扩展名，或创建空白文本文件并将.txt扩展名更改为.scss来完成此操作。

告诉Sass“观察”文件

一旦你的文件存在，你想告诉Sass要注意它的变化，所以它可以用传统的CSS语法将它编译成常规的CSS文件。

在命令提示符下，在.scss文件所在的文件夹内，键入以下内容，然后按Enter键：

sass --watch styles.scss:styles.css

您可以复制上面的代码并将其粘贴到提示中，方法是右键单击并选择“粘贴”（ctrl-V将无法在那里工作）。确保“styles.scss”与您在创建新.scss文件时选择的文件名匹配，并与生成的.css文件相同。不要担心.css文件还不存在; Sass会自动创建它。

一旦使用了如上所示的正确命令，您应该在命令提示符中看到：

如您所见，Sass现在正在“观察”您的.scss文件以进行更改。要停止观看，只需在提示符中按ctrl-C即可。

告诉Sass“观察”文件

一旦你的文件存在，你想告诉Sass要注意它的变化，所以它可以用传统的CSS语法将它编译成常规的CSS文件。

在命令提示符下，在.scss文件所在的文件夹内，键入以下内容，然后按Enter键：

sass --watch styles.scss:styles.css

一旦使用了如上所示的正确命令，您应该在命令提示符中看到：

如您所见，Sass现在正在“观察”您的.scss文件以进行更改。要停止观看，只需在提示符中按ctrl-C即可。

写一些Sass并让它编译

使用任何文本编辑器，打开.scss文件并在其中抛出一些Sass。这篇文章不是关于Sass语法（在线有大量的东西，我将来可能会介绍一些东西），但这里有一个你可以复制和粘贴的例子，取自Sass网站（使用“view plain”）链接以获取没有行号的代码的干净副本）：

$blue: #3bbfce;

$margin: 16px;

.content-navigation {

  border-color: $blue;

  color: darken($blue, 9%);

}

.border {

  padding: $margin / 2;

  margin: $margin / 2;

  border-color: $blue;

}

将其粘贴到文本编辑器后，只需保存.scss文件，然后返回命令提示符。您应该看到如下内容：

请注意，Sass已自动检测到对文件的更改，并在同一文件夹中生成了一个新文件。在该文件夹中，您将看到名为“styles.css”的新文件（或任何您命名为.scss文件的文件）。在文本编辑器中打开该新文件以查看已编译的CSS。

使用上面的示例，您应该看到输出显示如下（花括号放置或间距可能略有不同）：

.content-navigation {

  border-color: #3bbfce;

  color: #2ca2af;

}

.border {

  padding: 8px;

  margin: 8px;

  border-color: #3bbfce;

}

现在，您可以继续在.scss文件中编写基于Sass的代码，Sass将在每次保存原始文件时继续检测这些更改并覆盖CSS文件。

当然，请记住，在HTML文件中，当您引用CSS时，您将指向常规的.css文件。.scss文件仅供您编辑，不会直接在任何网页中使用。