如何在Ubuntu上运行的VPS上设置Sass
介绍
Sass 是一个 CSS 预处理器，它可以让您以比使用简单的平面 CSS 更高效、更智能的方式创建样式表。 它提供了许多动态组件，可以使您的代码更小、更可重用和更可扩展。 它的语法相当容易理解，而不是在常规 CSS 之上添加而不是替换它。
在本教程中，我们将了解如何安装 Sass 并开始使用它。 为此，它假设您已经在运行您自己的带有 Ubuntu 的 VPS，并且如果您想在浏览器中查看某些内容（但在此级别不是必需的），则在其上安装了 Web 服务器。
请注意，您也可以在 Windows 和 OS X 等其他操作系统上安装 Sass。
您可以查看这篇 文章 以帮助您启动并运行您的 VPS。
安装 Sass
为了安装 Sass，我们首先需要在系统上安装 Ruby，所以我们必须先安装它。 此外，我们还必须安装 rubygems（Ruby 的包管理系统）。 让我们使用以下命令完成这两项任务：
sudo apt-get update sudo apt-get install ruby-full rubygems
接下来，我们可以使用 gem 命令安装 Sass：
sudo gem install sass
现在 Sass 已经安装好了，我们可以开始了。
使用 Sass
让我们创建一个样式表来玩。 导航到 Web 服务器的根文件夹（对于 Apache，它应该是 /var/www）并创建一个名为 style.scss 的文件：
cd /var/www nano style.scss
在此文件中，粘贴以下 CSS 规则：
.box {
padding:20px;
background-color:red;
}
如您所见，这是一些基本的 CSS。 保存文件并退出。 现在，我们需要告诉 Sass 将此文件转换为常规的 css 格式文件（以 .css 扩展名结尾）：
sass --watch style.scss:style.css
使用此命令，Sass 将生成 .css 文件并监视 .scss 文件是否有任何更改。 如果它们发生，.css 文件将自动更新。
第一次运行此命令时，您会收到以下错误：
[Listen warning]:
Missing dependency 'rb-inotify' (version '~> 0.9')!
Please run the following to satisfy the dependency:
gem install --version '~> 0.9' rb-inotify
您可以运行以下命令来满足依赖关系：
gem install --version '~> 0.9' rb-inotify
这会做的伎俩。 现在，如果您正在处理多个 Sass 文件，您可以运行 --watch 命令并使其编译整个 .scss 文件文件夹：
sass --watch stylesheets/sass:stylesheets/css
这将使其跟踪 stylesheets/sass 文件夹中的所有 .scss 文件，自动编译它们并将它们转换为 stylesheets/css 文件夹中的等效文件。 但是，一旦您运行其中一个命令，Sass 将处于这种“监视模式”，直到您告诉它停止。
您可以按 Ctrl+C 使其停止监视文件。 之后，您对 .scss 文件所做的更改将不会自动反映在 .css 文件中，直到您再次运行 --watch 命令。
那么有什么关系呢？ 我们所做的只是将一些 css 写入一个文件，然后将其复制到另一个文件中。 但是 Sass 还有更多功能，这就是你应该使用它的原因。 所以让我们看看你还能做什么。
嵌套
嵌套是避免一遍又一遍地编写相同选择器的好方法。 例如，假设您有 3 个以相同内容开头的选择器：“.box ul”、“.box li”和“.box li a” . 通常，您必须为这些创建三个不同的规则：
.box ul {
...
}
.box li {
...
}
.box li a {
...
}
但是使用 Sass，你可以像这样嵌套它们：
.box {
padding:20px;
background-color:red;
ul {
margin:10px;
}
li {
float:left;
a {
color:#eee;
}
}
}
如您所见，通过这种方式，您避免了重复编写选择器的 .box 部分 3 次。 此外，它看起来非常简单和合乎逻辑。 现在，如果您使用 --watch 命令生成 .css 等效项，它将自动为您创建所有 3 个 css 块：
.box {
padding: 20px;
background-color: red;
}
.box ul {
margin: 10px;
}
.box li {
float: left;
}
.box li a {
color: #eee;
}
此外，您可以使用相同的逻辑嵌套属性。 例如，您可以编写如下内容：
.box {
padding: {
top:20px;
right:10px;
bottom:15px;
left:10px;
}
}
这节省了您必须写 4 次“填充”一词的时间。
变量
Sass 另一个节省时间且非常棒的特性是变量的使用。 与 PHP 或 javascript 之类的编程语言类似，这允许您声明一个变量一次，然后在您的代码中尽可能多次地使用它。 例如，您可以执行以下操作：
$color: #eee;
a {
color: $color;
}
然后，Sass 会将整个文件中的 $color 变量的所有实例替换为您曾经声明过的实际颜色代码：#eee。
混合
这些可能是最强大的 Sass 特性，它们的行为基本上类似于函数。 您可以重用整个样式声明，甚至向它们传递参数。 与函数类似，首先声明它们。 因此，让我们声明 2 个稍微不同的 mixin。
@mixin box-size {
width:200px;
height:200px;
padding:10px;
margin:0px;
}
@mixin border($width) {
border: $width solid #eee;
}
如您所见，第一个不带任何参数。 我们可以像这样使用它：
.box {
@include box-size;
}
这将输出以下css：
.box {
width:200px;
height:200px;
padding:10px;
margin:0px;
}
我们可以通过传递一个参数来使用第二个 mixin：
.box2 {
@include border(1px);
}
这将使用 mixin 中定义的规则并将其传递给 size 参数以获得更大的灵活性。 这将输出以下css：
.box2 {
border: 1px solid #eee;
}
这些是使 Sass 很棒的一些但不是全部的功能。 您可以对许多可能的值和其他很棒的东西进行各种计算。 要了解更多信息和如何使用它的示例，您可以查看 Sass 网站。
输出方式
运行我们上面看到的 --watch 命令将使 Sass 以默认方式将结果 CSS 输出到 .css 文件中：嵌套。 您可以选择 4 种不同类型的输出样式：
- 嵌套：反映 CSS 样式的结构和它们所设置样式的 HTML 文档。
- 扩展：每个属性和规则占一行
- 紧凑：每条 CSS 规则只占一行，每个属性都在该行上定义。
- 压缩：除了分隔选择器和文件末尾的换行符之外没有空格。
您可以在 此处 阅读有关这些不同样式的更多信息。 但是在它们之间切换的一种简单方法是在 --watch 命令本身中通过在末尾添加一个标志。 例如，如果我们想使用 expanded 样式，我们运行如下命令：
sass --watch style.scss:style.css --style=expanded
结论
Sass 非常强大，一旦您习惯了它，您将拥有更轻松的前端体验。 它为 CSS 的思考方式增加了智能，并提供了使其工作更高效的工具。
