作为一名新的WordPress主题设计师，您可以快速学习维护长CSS文件的挑战，同时保持它们的组织性，可扩展性和可读性。 您还将了解到许多设计人员和前端开发人员建议使用CSS预处理器语言（如Sass或LESS）。 但是这些东西是什么？ 你如何开始使用它们？ 本文是对新的WordPress主题设计师Sass的介绍。 我们会告诉你什么是CSS预处理器，为什么你需要它，以及如何安装并立即开始使用它们。
什么是Sass？
我们使用的CSS被设计成一个易于使用的样式表语言。 然而，网络已经发展，设计师也需要一种样式表语言，使他们能够以更少的精力和时间做更多的事情。 像Sass这样的CSS预处理器语言允许您使用CSS中当前不可用的特性，例如使用变量，基本数学运算符，嵌套，混合等等。
它非常类似于PHP，它是一个预处理器语言，在服务器上执行脚本并生成HTML输出。 同样，Sass预处理.scss文件以生成可供浏览器使用的CSS文件。
自3.8版本以来，WordPress管理区域的风格被移植到Sass的开发中。 有很多WordPress主题商店和开发商已经利用Sass来加速他们的开发过程。
Sass开始使用WordPress主题开发
大多数主题设计者使用本地开发环境来处理主题，然后将其部署到分段环境或实时服务器。 由于Sass是一种预处理语言，因此您需要将其安装在本地开发环境中。
首先你需要安装Sass。 它可以用作命令行工具，但也有一些很好的GUI应用程序可用于Sass。 我们推荐使用Koala，这是一个可用于Mac，Windows和Linux的免费开源应用程序。
为了这篇文章，你将需要创建一个空白的主题。 只需在中创建一个新的文件夹 /可湿性粉剂内容/主题/ 。 你可以把它命名为“mytheme”或其他你想要的东西。 在你的空白主题文件夹内创建另一个文件夹并命名为样式表。
在样式表文件夹中，您需要创建一个 style.scss 文件使用像记事本这样的文本编辑器。
现在你需要打开考拉，点击加号图标添加一个新的项目。 接下来，找到您的主题目录，并将其添加为您的项目。 你会注意到考拉会自动在你的样式表目录中找到Sass文件并显示它。
右键点击你的Sass文件并选择 设置输出路径 选项。 现在选择你的主题目录的根目录，例如， /可湿性粉剂内容/主题/ mytheme的/ 并回车。 Koala现在将在您的主题目录中生成CSS输出文件。 要测试这个，你需要打开你的Sass文件 style.scss 在像记事本这样的文本编辑器中添加以下代码：
$ fonts：arial，verdana，sans-serif;
身体 {
FONT-FAMILY：$字体;
}
现在您需要保存您的更改并返回到考拉。 右键单击您的Sass文件，侧边栏将滑动到右侧。 要编译你的Sass文件，只需点击 “编译” 按钮。 你可以看到结果通过打开 style.css文件 文件在你的主题目录中，并且会有如下的处理过的CSS：
身体 {
font-family：arial，verdana，sans-serif; }
注意我们已经定义了一个变量 $字体 在我们的Sass文件中。 现在，无论何时我们需要添加字体系列，我们都不需要再次输入所有字体的名称。 我们可以使用 $字体 。
其他超级大国Sass带给CSS什么？
Sass非常强大，向后兼容，并且超级简单易学。 正如我们前面提到的，你可以创建变量，嵌套，混合，导入，偏分量，数学和逻辑运算符等等。现在我们将向你展示一些例子，你可以试试你的WordPress主题。
管理多个样式表
作为一个WordPress主题设计师将面临的一个常见问题是大量的样式表，其中包含很多部分。 在处理主题时，您可能会上下滚动以修复某些内容。 使用Sass，您可以将多个文件导入到主样式表中，并为您的主题输出单个CSS文件。
怎么样CSS @import？
在CSS文件中使用@import的问题是，每次添加@import时，CSS文件都会向服务器发出另一个HTTP请求。 这会影响你的页面加载时间，这不利于你的项目。 另一方面，当您在Sass中使用@import时，它将把这些文件包含在您的Sass文件中，并将它们全部放在浏览器的单个CSS文件中。
要学习如何在Sass中使用@import，首先需要创建一个 reset.scss 将文件粘贴到主题的样式表目录中，并将其粘贴到其中。
/ * http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
许可证：无（公有领域）
* /
html，body，div，span，applet，object，iframe，
h1，h2，h3，h4，h5，h6，p，blockquote，pre，
a，abbr，首字母缩略词，地址，大，cite，代码，
del，dfn，em，img，ins，kbd，q，s，samp，
小，罢工，强，子，sup，tt，var，
b，你，我，中心，
dl，dt，dd，ol，ul，li，
fieldset，窗体，标签，传说，
表，标题，tbody，tfoot，thead，tr，th，td，
文章，放在一边，画布，细节，嵌入，
图，figcaption，页脚，标头，hgroup，
菜单，导航，输出，红宝石，部分，总结，
时间，标记，音频，视频{
保证金：0;
填充：0;
border：0;
font-size：100％;
字体：继承;
vertical-align：baseline;
}
/ * HTML5显示 - 旧版浏览器的角色重置* /
文章，旁边，细节，figcaption，图，
页脚，标题，hgroup，菜单，导航，部分{
显示：块;
}
身体 {
line-height：1;
}
ol，ul {
list-style：none;
}
blockquote，q {
报价：无;
}
blockquote：之前，blockquote：之后，
q：之前，q：之后{
内容：'';
内容：无;
}
表{
边界崩溃：崩溃;
border-spacing：0;
}
现在你需要打开你的main style.scss文件，并在你想要导入重置文件的地方添加这一行：
@import'reset';
注意你不需要输入完整的文件名。 要编译这个，你需要打开Koala并再次点击编译按钮。 现在打开你的主题的主要style.css文件，你会看到你的重置CSS包含在其中。
巢在萨斯
与HTML不同，CSS不是嵌套语言。 Sass允许您创建易于管理和使用的嵌套文件。 例如，你可以嵌套所有的元素
部分，在文章选择器下。 作为一个WordPress主题设计师，这使您可以在不同的部分工作，并轻松地设计每个元素。 为了在行动中看到巢蛋白，添加到您的 style.scss 文件：
.entry-content {
p {
字体大小：12像素;
行高：150％;
}
ul {
行高：150％;
}
a：link，a：visited，a：active {
文字修饰：无;
颜色：＃ff6633;
}
}
处理完之后它会输出下面的CSS：
.entry-content p {
font-size：12px;
行高：150％; }
.entry-content ul {
行高：150％; }
.entry-content a：链接，.entry-content a：visited，.entry-content a：active {
文字修饰：无;
颜色：＃ff6633; }
作为主题设计师，您将为小部件，文章，导航菜单，标题等设计不同的外观和感觉。在Sass中使用nestin使其结构良好，并且不必将相同的类，选择器和标识符编写在 再次。
在Sass中使用Mixins
有时候，即使样式规则是相同的，你也需要在项目中重用一些CSS，因为你将在不同的选择器和类中使用它们。 这是mixin派上用场的地方。 让我们添加一个mixin到你的style.scss文件中：
@mixin hide-text {
溢出：隐藏;
TEXT-INDENT：-9000px;
显示：块;
}
这个mixin基本上隐藏了一些显示的文本。 这里是一个如何使用这个mixin来隐藏你的logo的文本的例子：
。商标{
背景：url（“logo.png”）;
高度：100像素;
宽度：200像素;
@include hide-text;
}
注意你需要使用 @包括 添加一个mixin。 处理完后会生成下面的CSS：
。商标 {
背景：url（“logo.png”）;
height：100px;
宽度：200px;
溢出：隐藏;
text-indent：-9000px;
显示：块; }
Mixins对于供应商前缀也非常有帮助。 添加不透明度值或边框半径时，使用mixin可以为您节省大量时间。 看看这个例子，我们添加了一个mixin来添加边框半径。
@mixin border-radius（$ radius）{
-webkit-border-radius：$ radius;
-moz-border-radius：$ radius;
-ms-border-radius：$ radius;
-o-border-radius：$ radius;
border-radius：$ radius;
}
.largebutton {@include border-radius（10px）; }
.smallbutton {@include border-radius（5px）; }
编译之后，会生成下面的CSS：
.largebutton {
-webkit-border-radius：10px;
-moz-border-radius：10px;
-ms-border-radius：10px;
-o-border-radius：10px;
border-radius：10px; }
.smallbutton {
-webkit-border-radius：5px;
-moz-border-radius：5px;
-ms-border-radius：5px;
-o-border-radius：5px;
border-radius：5px; }
我们希望这篇文章激起你对Sass for WordPress主题开发的兴趣。 许多WordPress主题设计师已经在使用它。 有些人甚至会说，将来所有的CSS都将被预处理，而WordPress主题开发者需要开发他们的游戏。 让我们知道如何使用像Sass这样的CSS预处理器语言来为您的WordPress主题开发留下什么想法，留下评论如下。
其他资源
Sass Lang
萨斯方式