作为一个新的 WordPress 主题设计师,您很快就会了解到维护长CSS 文件并保持其干净、可扩展和可读是多么困难。
许多设计师和前端开发人员(包括 WPBeginner 的设计师和前端开发人员)都建议使用 Sass 或 LESS 等 CSS 预处理语言来简化工作。但是这些预处理器是什么?那么您怎样开始呢?
本文是针对新的 WordPress 主题设计者进行的 Sass 介绍。我们将解释什么是 CSS 预处理器、为什么需要它以及如何安装它并立即开始使用它。
什么是 Sass (Syntactically Awesome Stylesheet)?
我们使用的CSS被设计为一种易于使 香港流动电话号码数据 用的样式表语言。然而,网络已经发展,这就是为什么设计师需要一种样式表语言,让他们能够用更少的精力和时间完成更多的事情。
像 Sass 这样的 CSS 预处理器语言可以让你利用 CSS 中目前不可用的功能,例如变量、基本数学运算符、嵌套、mixins 等。
它类似于 PHP,一种在服务器上执行脚本并生成 HTML 输出的预处理器语言。类似地,Sass 预处理 .scss 文件以生成可供浏览器使用的 CSS 文件。
从3.8 版本开始, WordPress 管理区域样式已移植到使用 Sass 进行开发。许多 WordPress 主题商店和开发人员已经在使用 Sass 来加快他们的开发过程。
使用 Sass 进行 WordPress 主题开发入门
大多数主题设计师在将主题部署到暂存环境或 试与拥有与您相似的受众的潜在顾 实时服务器之前,都会使用本地开发环境来处理主题。由于 Sass 是一种预处理语言,因此您需要在本地开发环境中安装它。
您需要做的第一件事是安装 Sass。它可以用作命令行工具,但也有一些不错的 Sass GUI 应用程序。我们建议使用Koala,这是一款适用于 Mac、Windows 和 Linux 的免费开源应用程序。
出于本文的目的,您需要创建一个空主 br 号码列表 题。只需在 中创建一个新文件夹/wp-content/themes/
。您可以将其称为“mytheme”或任何其他名称。在空的主题文件夹中,创建另一个文件夹并将其命名为 Stylesheets。
在“Stylesheets”文件夹中,您需要使用文本编辑器(例如记事本)创建一个文件style.scss
。
现在您需要打开 Koala 并单击加号图标来添加一个新项目。接下来,找到您的主题目录并将其添加为您的项目。您会注意到,Koala 会自动在您的样式表目录中查找并显示 Sass 文件。