原文地址：jakeprice.tech/2018/07/29/…
原文作者：jakeprice.tech/
发布时间：2018年7月29日 - 阅读7分钟
我一直说我讨厌网页设计，但我恰好认为我很擅长设计部分。我的问题是，尽管我不是特别喜欢这个过程，但我总是发现，当我为自己创建一个网站时，我有一个问题。这个问题是，当我使用别人的设计或主题时，我从来没有快乐过！我必须自己设计一些东西。
我必须自己设计一些东西。尤其是像这样的博客，它实际上是我的作品集。我必须确保它从人群中脱颖而出，并展示我的能力。
这个博客的设计还在不断发展中（去看看我的GitHub仓库吧）。当初创建它的时候，我竟然错过了很多东西。我还在修正bug，调整一些东西。
我对设计和用户体验有一些强烈的信念。虽然我远不是这方面的专家，而且对于任何产品来说，这都是一个持续的过程，但这确实意味着我比很多人考虑得更多。我努力使我设计的任何东西都尽可能的可读性和良好的组合，基于我的能力（对于网络开发来说，这并不总是与我想做的事情相匹配！）。
直到为我的博客创建了一个定制设计，我已经有几年没有使用HTML或CSS（网络的构件）了。其中有一件事让我很恼火，那就是编写CSS的过程是多么手动。直到Sass的出现。
几年前，我曾经玩过Sass，读过Dan Cederholm（他是我成长过程中的网页设计英雄）的优秀入门书，觉得它很棒。
我不是什么专家，我也只是从表面上了解了它的可能性，但下面是你如何开始使用它的方法。
什么是Sass？
Sass是Syntactically awesome style sheets的缩写，用维基百科的话来说，它是一种。
预处理器脚本语言，它被解释或编译成层叠样式表（CSS）。
简单来说，它可以让你通过使用变量等功能来提升你的CSS水平。这也是我目前使用它的主要目的。
例如，你可以将一个元素的颜色分配给一个在样式表中定义的变量，只需要修改一次，就可以在整个样式表中进行更新，而不是在样式表中多次手动设置一个元素的颜色，然后才发现你想尝试不同的颜色。如果我这么说的话，真是太方便了。
例如，用下面的样式来代替
.element {
background-color: #ccc;
}
我们可以这样做。
$element-color: #ccc;
.element {
background-color: $element-color;
}
请注意，我们用$定义了一个变量。
当你有一个大的样式表和许多不同的颜色、字体和大小时，变量的威力就会真正发挥作用。你可以在一个地方设置你的变量，然后再回到那个地方改变整个样式表。
我使用它们来设置字体类型、字体大小、颜色、宽度，甚至设置边框的宽度。
它让整个编写CSS的过程变得更加高效。
那么如何才能开始使用Sass呢？
安装和使用Sass。 好吧，首先你需要安装它。这真的是再简单不过了。我使用的是一个叫Dart Sass的变体，它是 "Sass的主要实现"。所以我将向你展示如何在Windows环境中开始使用它。
下载Dart Sass
首先前往Install Sass网站，在Install Anywhere（Standalone）下点击来自GitHub的链接。
然后我们就可以从几个软件包中选择。由于我们要在Windows上安装Dart Sass，所以选择64位Windows下载。点击链接进行下载。
一旦下载了.zip文件（只有大约10MB），你需要解压它。然后，我们可以把这个文件夹复制到一个它可以称之为家的地方！让我们把它复制到C:\驱动器的根部。
让我们把它复制到C:\驱动器的根部。
在Windows "路径 "中添加Dart Sass。
接下来，我们需要将它添加到系统路径中。这意味着你可以从命令行中调用它，这就是我们将使用它的方式。
打开控制面板，进入系统。
快速说明。
如果你以前没有这样做，你可能需要将视图更改为类别以外的内容，以查看控制面板选项的完整列表。
在左侧边栏点击高级系统设置。
然后在弹出的窗口底部，点击环境变量。
在变量列表中，我们要选择路径，然后点击编辑。
现在你会看到路径上现有的条目列表，你可以添加一个新的路径或编辑（和删除）现有的路径。
我们可以简单的点击新建。
现在你需要指定你放置dart-sass文件夹的位置路径。在这个例子中，这很好，也很简单，只要在行输入中输入C:\dart-sass即可。
然后你可以按 "确定 "关闭路径编辑器，再按 "确定 "关闭环境变量，再按 "确定 "关闭系统属性。
测试一下
我们来测试一下，看看是否成功。
我们可以通过打开命令提示符来实现。我总是用Run来做，所以只要Windows键+R，然后输入cmd。
快速注意。
你不需要重新启动你的机器，但你需要重新打开任何你可能打开的命令提示符窗口，然后才能使用更新的路径。
接下来在提示符中输入sass（命令dart-sass已被废弃），如果你的路径是正确的，那么sass命令行程序就会运行，你会得到一些关于如何使用它的信息。
成功了！你现在可以走了，你可以在晚上尽情地撒娇了。
Sass在行动
网络上有很多东西可以帮助你使用Sass。去和DuckDuckGo它。我只是从表面上看，这已经足够满足我的需求了。
然而，为了我自己将来的参考，我想我应该在下面留下一个Sass命令的例子，以备我忘记如何使用它。
以下是我在编辑主题时使用的命令。
$ sass --watch assets/css/screen.scss:assets/css/screen.css --style compressed.
简单的说，我们告诉Sass --watch我的screen.scss文件，并将变化编译到screen.css文件中。然后我们定义一个编译 --style，在本例中是compressed，它改变了CSS的编译方式，在本例中删除了所有注释、空格和换行符。我相信这也叫minification。
下面是我运行该命令，对 screen.scss 样式表进行修改并保存后的结果。
下面是我的.scss样式表的一部分，在Sass将其压缩到.css文件之前的一个例子。
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* global */
a { text-decoration: none; }
body { margin: 0 auto; }
/* sections */
.section { clear: both; padding: 0; margin: 0; }
/* column setup */
.col { display: block; float:left; margin: 1em 0 1em 1.6%; }
下面是CSS被Sass压缩后的样子。
ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}body{margin:0 auto}.section{clear:both;padding:0;margin:0}.col{display:block;float:left;margin:1em 0 1em 1.6%}
在Linux上使用Dart Sass的说明
实际上你做的事情是完全一样的。只是这次你需要下载Linux版本的Dart。
解压后，将dart-sass文件夹放到你的主目录中，然后你需要将它添加到你的路径中。
在文本编辑器中导航到并打开.bashrc，它会被隐藏，所以你可能需要显示隐藏的文件/文件夹。
向下滚动到文件底部，创建一个新行并输入以下内容。
export PATH="~/dart-sass:$PATH"
如果你没有对文件进行任何编辑的话，它会看起来像下面的东西。
然后在终端机上运行下面的内容（你不会得到一个结果）。
$ source ~/.bashrc
现在你就可以在终端中调用sass了，就像下面这样。
就这样，这里还有很多关于Sass的信息，如果你有兴趣的话，可以去那里看看。
谢谢你，一如既往的阅读。
通过( www.DeepL.com/Translator )（免费版）翻译
