02/21/2023

新手WordPress主题设计师的Sass入门介绍

什么是Sass（语法优雅的样式表）？

我们使用的CSS设计成一种易于使用的样式表语言。然而，随着网络的发展，设计师需要一种可以以更少的努力和时间做更多的语言。CSS预处理语言，如Sass，允许你使用当前CSS中不可用的功能，如变量、基本数学运算符、嵌套、混入等。它非常像PHP，它是一种在服务器上执行脚本并生成HTML输出的预处理语言。同样，Sass预处理.scss文件生成可以被浏览器使用的CSS文件。

从3.8版本开始，WordPress管理区样式被移植到利用Sass进行开发。许多WordPress主题商店和开发人员已经在使用Sass加快开发过程。

开始使用Sass进行WordPress主题开发

大多数主题设计师使用本地开发环境在部署到暂存环境或实时服务器之前工作在他们的主题上。由于Sass是一种预处理语言，你需要在本地开发环境中安装它。首先你需要安装Sass。它可以作为命令行工具使用，但也有一些不错的GUI应用程序可供使用。我们推荐使用Koala，它是一个适用于Mac、Windows和Linux的免费开源应用程序。

为了这篇文章的目的，你需要创建一个空白主题。只需在/wp-content/themes/中创建一个新文件夹。你可以命名为‘mytheme’或任何你想要的名称。在你的空白主题文件夹内创建另一个文件夹并命名为stylesheets。在stylesheets文件夹中，使用类似Notepad的文本编辑器创建一个style.scss文件。

现在你需要打开Koala并点击加号图标添加一个新项目。接下来，找到你的主题目录并将其添加为你的项目。你会注意到Koala会自动在你的stylesheets目录中找到Sass文件并显示它。

右键点击你的Sass文件并选择‘设置输出路径’选项。现在选择你的主题目录的根目录，例如，/wp-content/themes/mytheme/并回车。Koala现在会在你的主题目录中生成CSS输出文件。要测试这一点，你需要在类似Notepad的文本编辑器中打开你的Sass文件style.scss并添加以下代码：

$fonts: arial, verdana, sans-serif; body { font-family:$fonts; }

现在你需要保存你的修改并回到Koala。右键点击你的Sass文件，右侧会滑出一个侧边栏。要编译你的Sass文件，只需点击‘编译’按钮。可以通过打开你的主题目录中的style.css文件查看结果，它将具有处理后的CSS，如下所示：

body { font-family: arial, verdana, sans-serif; }

注意，我们在Sass文件中定义了一个变量$fonts。现在每当我们需要添加字体家族时，我们不需要再次输入所有字体名称。我们只需使用$fonts。

Sass对CSS的其他超级功能

Sass功能强大，向后兼容，并且非常容易学习。正如我们之前提到的，你可以创建变量、嵌套、混入、导入、部分、数学和逻辑运算符等。现在我们将展示一些示例，你可以在你的WordPress主题中尝试这些功能。

管理多个样式表

作为一个WordPress主题设计师，你会遇到的大问题之一是包含许多部分的大型样式表。在处理你的主题时，你可能会不停地上下滚动以修复问题。使用Sass，你可以将多个文件导入到你的主样式表中，并为你的主题输出一个单一的CSS文件。

CSS @import的问题

在CSS文件中使用@import的问题在于，每次你添加一个@import时，你的CSS文件会向服务器发出另一个HTTP请求。这会影响你的页面加载时间，对你的项目不利。而当你在Sass中使用@import时，它会将文件包含在你的Sass文件中，并在浏览器中以一个单一的CSS文件提供它们。

要学习如何在Sass中使用@import，首先你需要在主题的stylesheets目录中创建一个reset.scss文件并粘贴以下代码：

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } body { line-height:1; } 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; }

现在你需要打开你的主style.scss文件并添加这一行，指定你希望重置文件被导入的位置：

@import 'reset';

注意，你不需要输入完整的文件名。要编译这个，你需要打开Koala并再次点击编译按钮。现在打开你的主题的主style.css文件，你会看到你的重置css已经包含在里面。

在Sass中的嵌套

与HTML不同，CSS不是一种嵌套语言。Sass允许你创建易于管理和使用的嵌套文件。例如，你可以将所有元素嵌套在文章标签下。对于WordPress主题设计师来说，这让你可以轻松地在不同部分上工作，并为每个元素设置样式。要见识嵌套的效果，在style.scss文件中添加:

.entry-content { p { font-size:12px; line-height:150%; } ul { line-height:150%; } a:link, a:visited, a:active { text-decoration:none; color: #ff6633; } }

编译后它将输出以下的CSS：

.entry-content p { font-size: 12px; line-height: 150%; } .entry-content ul { line-height: 150%; } .entry-content a:link, .entry-content a:visited, .entry-content a:active { text-decoration: none; color: #ff6633; }

作为一个主题设计师，你会设计不同外观和感觉的小部件、帖子、导航菜单、页眉等。使用Sass中的嵌套可以使其结构良好，你不需要重复编写相同的类、选择器和标识符。

在Sass中使用Mixins

有时你需要在你的项目中复用一些CSS，即使样式规则是相同的，因为你会在不同的选择器和类上使用它们。这时，混入（mixin）就派上用场了。让我们在你的style.scss文件中添加一个mixin：

@mixin hide-text{ overflow:hidden; text-indent:-9000px; display:block; }

这个mixin基本上是隐藏一些文本不被显示。以下是一个如何使用这个mixin来隐藏徽标文本的示例：

.logo{ background: url('logo.png'); height:100px; width:200px; @include hide-text; }

注意，你需要使用@include来添加一个mixin。之后，编译它将生成如下的CSS：

.logo { background: url('logo.png'); height: 100px; width: 200px; overflow: hidden; text-indent: -9000px; display: block; }

Mixins在处理供应商前缀时也非常有用。当添加不透明值或边框半径时，使用mixins可以节省大量时间。看看这个例子，我们添加了一个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; }