作为一名新的wordpress主题设计师,您可以快速了解维护长css文件同时保持其组织性、可扩展性和可读性的挑战。
许多设计师和前端开发人员建议使用Sass或LESS等CSS预处理器语言来使工作变得更容易。但这些东西是什么?您如何开始使用它们?
本文是为新的WordPress主题设计师介绍Sass。我们将告诉您什么是CSS预处理器、为什么需要它以及如何立即安装和开始使用它们。
什么是Sass(语法很棒的样式表)?
我们使用的CSS被设计为一种易于使用的样式表语言。然而,网络已经发展,因此设计人员需要一种样式表语言,使他们能够用更少的精力和时间做更多的事情。CSS预处理器语言(例如Sass)允许您使用CSS当前不可用的功能,例如变量、基本数学运算符、嵌套、混合等。
它与PHP非常相似,PHP是一种预处理语言,可在服务器上执行脚本并生成HTML输出。同样,Sass预处理.scss文件以生成可供浏览器使用的CSS文件。
从3.8版本开始,WordPress管理区域样式被移植为利用Sass进行开发。许多WordPress主题商店和开发人员已经在使用Sass来加快他们的开发过程。
开始使用Sass进行WordPress主题开发
大多数主题设计者使用本地开发环境来处理他们的主题,然后将其部署到临时环境或实时服务器。由于Sass是一种预处理器语言,因此您需要将其安装在本地开发环境中。
您需要做的第一件事是安装Sass。它可以用作命令行工具,但也有一些不错的GUI应用程序可用于Sass。我们建议使用Koala,这是一款适用于Mac、Windows和Linux的免费开源应用程序。
为了本文的目的,您将需要创建一个空白主题。只需在中创建一个新文件夹/wp-content/themes/。您可以将其命名为“mytheme”或任何您想要的名称。在空白主题文件夹中创建另一个文件夹并将其命名为样式表。
style.scss在样式表文件夹中,您需要使用记事本等文本编辑器创建一个文件。
现在您需要打开Koala并单击加号图标来添加新项目。接下来,找到您的主题目录并将其添加为您的项目。您会注意到,Koala会自动在您的样式表目录中找到Sass文件并显示它。
右键单击您的Sass文件并选择“设置输出路径”选项。现在选择主题目录的根目录example,/wp-content/themes/mytheme/然后按Enter键。Koala现在将在您的主题目录中生成CSS输出文件。要测试这一点,您需要style.scss在记事本等文本编辑器中打开Sass文件并添加以下代码:
$fonts:arial,verdana,sans-serif;body{font-family:$fonts;}