介绍
萨斯是一个CSS预处理器，让您以更高效和智能的方式比使用简单的平面CSS样式表的创建。 它提供了许多动态组件，这将使您的代码更小，更可重用和更具可扩展性。 它的语法相当容易理解，而是添加在常规CSS之上，而不是替换它。
在本教程中，我们将看到如何安装Sass并开始使用它。 为此，它假设您已经运行自己的VPS与Ubuntu和安装在其上的Web服务器，如果你想看到的东西在浏览器（但在这一级没有必要）。
请注意，虽然您可以安装Sass也在其他操作系统，如Windows和操作系统。
你可以看看这个文章为让你和你的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
这将做伎俩。 现在，如果你正在处理多个萨斯文件，您可以运行--watch命令，使其编译.scss文件的整个文件夹：
sass --watch stylesheets/sass:stylesheets/css
这将使它跟踪在样式表/ SASS文件夹中所有.scss文件，自动编译它们并把它们纳入其等值的样式表/ css文件夹。 一旦你运行这些命令之一，Sass将处于这种“监视模式”，直到你告诉它停止。
您可以按Ctrl + C使其停止观看文件。 在此之后，改变您对.scss文件（S）不会在.css文件（S）自动反映，直到你再次运行--watch命令。
那么什么交易？ 我们所做的是将一些CSS写入一个文件，然后将其复制到另一个。 但是有更多的Sass，这就是为什么你应该使用它。 所以，让我们看看你能做什么。
嵌套
嵌套是一个很好的方法，以避免重复写入相同的选择器。 例如说，你有3个选择，在相同的事情开始：“.box的UL”，“.box 的礼 ”和“.box的李一 ”。 通常，您必须为这些规则创建三个不同的规则：
.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相同，那么将自动为您创建的CSS块的所有3：
.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次单词“padding”的时间。
变量
另一个时间节省和简单的真棒功能的Sass是使用变量。 与编程语言（如PHP或JavaScript）类似，这允许您声明一个变量一次，并在您的代码中使用它多次。 例如你可以这样做：
$color: #eee;
a {
color: $color;
}
那么萨斯将取代你声明一次实际的颜色代码整个文件中的$ color变量的所有实例：#eee。
混合
这些可能是最强大的Sass功能，它们的行为基本上类似函数。 您可以重复使用整个样式声明，甚至传递它们的参数。 与函数类似，首先声明它们。 所以让我们声明2个略微不同的混合。
@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真棒。 你可以对许多可能的值和其他令人敬畏的事情进行各种计算。 要了解更多信息和如何使用它的例子，你可以检查出萨斯网站 。
输出样式
运行我们上面看到的--watch命令将使萨斯输出在其默认的方式.css文件生成的CSS：嵌套。 有4种不同类型的输出样式可供您选择：
- Nested：反映CSS样式的结构以及它们设置样式的HTML文档。
- 展开式：每个属性和规则占一行
- 紧凑：每个CSS规则只占用一行，每行定义一个属性。
- 压缩：除了在文件末尾分隔选择器和换行符之外，没有空格。
你可以阅读更多有关这些不同的风格在这里 。 但是，一个简单的方法来在它们之间切换是在--watch命令本身通过在末尾添加一个标志。 举例来说，如果我们要使用扩展的风格，我们像这样运行命令：
sass --watch style.scss:style.css --style=expanded
结论
Sass非常强大，一旦你习惯了它，你将有一个更容易的前端体验。 它增加了CSS的思维方式的智能，并提供工具，使其工作更有效率。
