新WordPress主题设计师Sass简介
作为一个新的WordPress主题设计师，您将很快学会维护长CSS文件的同时保持其有组织，可扩展和可读的挑战。您还将了解到许多设计人员和前端开发人员建议使用像Sass或LESS这样的CSS预处理器语言。但这些东西是什么？你如何开始使用它们？本文是对新WordPress主题设计师的Sass的介绍。我们将告诉您CSS预处理器是什么，为什么需要它，以及如何立即安装和开始使用它们。
什么是Sass？
我们使用的CSS设计为易于使用的样式表语言。然而，网络已经发展，设计师需要一种样式表语言，使他们能够以更少的精力和时间做更多事情。CSS预处理器语言（如Sass）允许您使用CSS中当前不可用的功能，例如使用变量，基本数学运算符，嵌套，mixins等。
它非常像PHP，它是一种预处理器语言，它在服务器上执行脚本并生成HTML输出。同样，Sass预处理.scss文件以生成可供浏览器使用的CSS文件。
从版本3.8开始，WordPress管理区域样式被移植到利用Sass进行开发。有许多WordPress主题商店和开发人员已经在利用Sass来加速他们的开发过程。
用于WordPress主题开发的Sass入门
大多数主题设计人员在将其部署到临时环境或实时服务器之前，使用本地开发环境来处理他们的主题。由于Sass是一种预处理器语言，因此您需要在本地开发环境中安装它。
您需要做的第一件事就是安装Sass。它可以用作命令行工具，但也有一些很好的GUI应用程序可用于Sass。我们建议使用Koala，这是一款适用于Mac，Windows和Linux的免费开源应用程序。
为了本文的目的，您需要创建一个空白主题。只需在 / wp-content / themes / 中创建一个新文件夹即可。您可以将其命名为“mytheme”或您想要的任何其他内容。在空白主题文件夹中创建另一个文件夹并将其命名为样式表。
在stylesheets文件夹中，您需要使用文本编辑器（如记事本）创建 style.scss 文件。
现在您需要打开Koala并单击加号图标以添加新项目。接下来，找到您的主题目录并将其添加为您的项目。您会注意到Koala会自动在样式表目录中找到Sass文件并显示它。
右键单击您的Sass文件并选择设置输出路径选项。现在选择主题目录的根目录，例如， / wp-content / themes / mytheme / 并按Enter键。Koala现在将在您的主题目录中生成CSS输出文件。要测试这个，你需要打开你的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, h4, h5, 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; }
现在您需要打开main style.scss文件并将此行添加到要导入重置文件的位置：
@import "reset";
请注意，您无需输入完整的文件名。要编译它，您需要打开Koala并再次单击编译按钮。现在打开主题的主要style.css文件，您将看到包含在其中的重置css。
Nestin in Sass
与HTML不同，CSS不是嵌套语言。Sass允许您创建易于管理和使用的嵌套文件。例如，您可以在文章选择器下嵌套＆lt; article＆gt; 部分的所有元素。作为一个WordPress主题设计器，这使您可以轻松地处理不同的部分和样式。要查看nestin的运行情况，请将其添加到 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中使用nestin使其结构良好，您不必一遍又一遍地编写相同的类，选择器和标识符。
在Sass中使用Mixins
有时您需要在整个项目中重用一些CSS，即使样式规则是相同的，因为您将在不同的选择器和类上使用它们。这就是mixins派上用场的地方。让我们在你的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; }
其他资源
Sass Lang
Sass Way
作为一个新的WordPress主题设计师，您将很快学会维护长CSS文件的同时保持其有组织，可扩展和可读的挑战。您还将了解到许多设计人员和前端开发人员建议使用像Sass或LESS这样的CSS预处理器语言。但这些东西是什么？你如何开始使用它们？本文是对新WordPress主题设计师的Sass的介绍。我们将告诉您CSS预处理器是什么，为什么需要它，以及如何立即安装和开始使用它们。
什么是Sass？
我们使用的CSS设计为易于使用的样式表语言。然而，网络已经发展，设计师需要一种样式表语言，使他们能够以更少的精力和时间做更多事情。CSS预处理器语言（如Sass）允许您使用CSS中当前不可用的功能，例如使用变量，基本数学运算符，嵌套，mixins等。
它非常像PHP，它是一种预处理器语言，它在服务器上执行脚本并生成HTML输出。同样，Sass预处理.scss文件以生成可供浏览器使用的CSS文件。
从版本3.8开始，WordPress管理区域样式被移植到利用Sass进行开发。有许多WordPress主题商店和开发人员已经在利用Sass来加速他们的开发过程。
用于WordPress主题开发的Sass入门
大多数主题设计人员在将其部署到临时环境或实时服务器之前，使用本地开发环境来处理他们的主题。由于Sass是一种预处理器语言，因此您需要在本地开发环境中安装它。
您需要做的第一件事就是安装Sass。它可以用作命令行工具，但也有一些很好的GUI应用程序可用于Sass。我们建议使用Koala，这是一款适用于Mac，Windows和Linux的免费开源应用程序。
为了本文的目的，您需要创建一个空白主题。只需在 / wp-content / themes / 中创建一个新文件夹即可。您可以将其命名为“mytheme”或您想要的任何其他内容。在空白主题文件夹中创建另一个文件夹并将其命名为样式表。
在stylesheets文件夹中，您需要使用文本编辑器（如记事本）创建 style.scss 文件。
现在您需要打开Koala并单击加号图标以添加新项目。接下来，找到您的主题目录并将其添加为您的项目。您会注意到Koala会自动在样式表目录中找到Sass文件并显示它。
右键单击您的Sass文件并选择设置输出路径选项。现在选择主题目录的根目录，例如， / wp-content / themes / mytheme / 并按Enter键。Koala现在将在您的主题目录中生成CSS输出文件。要测试这个，你需要打开你的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, h4, h5, 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; }
现在您需要打开main style.scss文件并将此行添加到要导入重置文件的位置：
@import "reset";
请注意，您无需输入完整的文件名。要编译它，您需要打开Koala并再次单击编译按钮。现在打开主题的主要style.css文件，您将看到包含在其中的重置css。
Nestin in Sass
与HTML不同，CSS不是嵌套语言。Sass允许您创建易于管理和使用的嵌套文件。例如，您可以在文章选择器下嵌套＆lt; article＆gt; 部分的所有元素。作为一个WordPress主题设计器，这使您可以轻松地处理不同的部分和样式。要查看nestin的运行情况，请将其添加到 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中使用nestin使其结构良好，您不必一遍又一遍地编写相同的类，选择器和标识符。
在Sass中使用Mixins
有时您需要在整个项目中重用一些CSS，即使样式规则是相同的，因为您将在不同的选择器和类上使用它们。这就是mixins派上用场的地方。让我们在你的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; }
其他资源
Sass Lang
Sass Way
