5.7 KiB
| title | localeTitle |
|---|---|
| Getting Started with Sass | Sass入门 |
介绍
Sass代表“Syntactically Awesome Stylesheets”，是一款CSS预处理器。预处理器将以特定语言编写的代码编译为机器可读（浏览器可读）的“产品”代码。基本上，Sass将代码编译为我们的浏览器可以解释的常规CSS！ _为什么CSS已存在时在Sass中编写代码？_简短的回答是Sass在其语法中内置了更强大的功能，允许开发人员编写DRY-er，可扩展且更易于维护的前端代码。
如果您熟悉CSS，那么学习Sass对您来说会更容易一些。如果没有，在他们的前端开发认证课程中开始学习Free Code Camp的HTML5和CSS部分的一些CSS基础知识，以及看看MDN的CSS文章可能是理想的 。
在本文的第1部分中，我将解释如何在您的计算机上安装Sass以及如何将Sass编写的代码编译为CSS。
安装
将Sass安装到您的计算机上的最简单方法是通过命令行。 Sass是一个Ruby gem，需要以下命令：
对于Mac和PC：
sudo gem install sass
对于Linux，您需要先安装Ruby语言，然后：
sudo su -c "gem install sass"
您现在应该能够检查已安装的Sass版本：
sass -v
它应该返回类似于：
Sass 3.4.21 (Selective Steve)
如果是这样，恭喜你，你刚刚安装了Sass！现在使用Sass。
基本用法和语法
让我们从一个非常简单的例子开始，来说明Sass实际上是如何工作的。您可以按照步骤进行操作，也可以直接阅读。
进口旁注：Sass可以用两种略有不同的风格书写，每种风格都有其自身的优点。一种风格将使用文件扩展名 .sass 和其他将使用 .scss 。 稍后将简要解释两种风格的差异。有关深入解释，请查看John W. Long的 Sass vs. SCSS文章 。
为了保持一致性，本文将提供.scss格式的代码示例，但这两种样式同样受欢迎。
好吧，让我们开始吧。我们将创建一个新文件夹来存放我们的示例文件（您可以在计算机上的任何位置执行此操作，并可以使用命令行或手动执行此操作）。
在该文件夹中，我们将创建一个名为style.scss的文件和一个名为index.html样式的HTML文件：
上图中的tree命令来自您可以安装的npm包，并且不是命令行的本机。 ls命令基本上做同样的ls 。
现在我们已经设置了项目文件夹，我们可以使用Sass watch命令“密切关注”我们的Sass文件，并在检测到文件更改时编译代码。我们在要查看的文件上输入watch命令：
sass --watch style.scss
下一步是在您选择的文本编辑器中打开项目文件夹。一旦我们打开文件并准备好进行编辑，我们就可以添加一个非常基本的HTML页面（对我们来说样式），如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<h1>Hello World</h1>
<p class="cat-paragraph-1">Cat ipsum dolor sit amet, stand in front of the computer screen, so chase imaginary bugs has closed eyes but still sees you caticus cuteicus.</p>
<p class="cat-paragraph-2">Drink water out of the faucet chew on cable or if it fits, i sits roll on the floor purring your whiskers off.</p>
</article>
</body>
</html>
设置完HTML后，我们可以打开我们的style.scss文件并在Sass中开始样式化。在下面的示例代码中，您可能会注意到某些样式选择器是如何嵌套在文章选择器中的; Sass独有的东西。不要担心，语法将在第2部分中解释。现在我们只想了解Sass如何以最简单的形式工作。
article {
h2 {
font-family: Arial;
color: blue;
}
.cat-paragraph-1 {
color: red;
}
.cat-paragraph-2 {
color: green;
}
}
一旦键入该代码并将其保存到style.scss文件中，我们打入命令行的监视任务将检测到文件中的更改，将我们的Sass编译为CSS，并输出一个名为style.css的新文件。您可能还会在项目文件夹中看到一个名为style.css.map文件，该文件也神奇地出现了。这个文件叫做源图，在调试Sass时很有用，但是现在我们就把它留下来了。
下面我们可以看到项目文件夹中列出的文件。
现在，如果我们在Web浏览器中打开index.html ，我们可以看到我们的HTML页面使用CSS格式化，这是从示例Sass代码编译而来的。同样，我们可以打开style.css文件来查看Sass如何输出原始的Sass代码。紧凑，不是吗？
然后去哪儿？
大！现在我知道如何在我的计算机上编译Sass。是吗？
不是由一个长镜头。这是Sass工作原理的一个简单例子，因此在Sass中编写优于vanilla CSS的好处可能并不明显。我们编写了12行“Sass”，结果得到7行CSS。不完全是任何标准的主要差异。在第2部分中，我们将解释Sass语法背后的魔力 ，例如变量和mixins，以及这些工具的使用如何在样式化时为我们提供超级大国。
如果你仍然坚持Sass如何神奇地编译成CSS或者你想要更多的示例代码， Sassmeister是一个很棒的在线界面，它允许你用Sass语法编写并立即看到你的代码编译成CSS而没有必须在您的计算机上安装任何东西或进行任何设置。这是沙盒和尝试Sass代码的非常有用的资源。