为新的WordPress主题设计师介绍Sass
作为一名新的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文件,只需点击 “编译” 按钮。 你可以看到结果通过打开 … Read more 为新的WordPress主题设计师介绍Sass