作为一名新的WordPress主题设计者,您很快就会学会如何在维护长的css文件的同时保持它们的组织性、可伸缩性和可读性。 许多设计人员和前端开发人员建议使用像Sass或更小的CSS预处理器语言来简化工作。但这些是什么东西呢?你是如何开始使用它们的呢? 这篇文章是为新的WordPress主题设计者介绍Sass的。我们将告诉您什么是CSS预处理器,为什么需要它,以及如何立即安装和开始使用它们。 右键单击您的Sass文件并选择设置输出路径选择。现在选择您的主题目录的根目录,例如/wp-content/themes/mytheme/然后按Enter键。考拉现在将在您的主题目录中生成css输出文件。要测试这一点,您需要打开您的Sass文件style.scss在记事本之类的文本编辑器中,添加以下代码: $fonts: arial, verdana, sans-serif; body { font-family:$fonts; } 由❤️托管WPCode在WordPress中一键使用 现在,您需要保存更改并返回到考拉。右击您的Sass文件,侧边栏将滑入右侧。要编译您的Sass文件,只需单击《Comile》纽扣。您可以通过打开style.css您的主题目录中的一个文件,它将具有如下处理过的CSS: body { font-family: arial, verdana, sans-serif; } 由❤️托管WPCode在WordPress中一键使用 请注意,我们定义了一个变量$fonts在我们的Sass文件中。现在,当我们需要添加字体系列时,我们不需要再次键入所有字体的名称。我们可以只用$fonts。 萨斯还为css带来了哪些超级大国? Sass非常强大,向后兼容,并且非常容易学习。正如我们前面提到的,您可以创建变量、嵌套、混合、导入、部分参数、数学和逻辑运算符等。现在我们将向您展示一些示例,您可以在您的WordPress主题上试用它们。 管理多个样式表 作为一名WordPress主题设计者,您将面临的一个常见问题是包含大量部分的大型样式表。在处理主题时,您可能会经常上下滚动以修复问题。使用Sass,您可以将多个文件导入到主样式表中,并为您的主题输出单个CSS文件。 Css@IMPORT怎么样? 在您的CSS文件中使用@IMPORT的问题在于,每次您添加一个@IMPORT时,您的CSS文件都会向服务器发出另一个HTTP请求。这会影响页面加载时间,这不利于您的项目。另一方面,当您在Sass中使用@IMPORT时,它将包括您的Sass文件中的文件,并在浏览器的单个CSS文件中提供所有这些文件。 要了解如何在Sass中使用@IMPORT,首先需要创建一个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, […]


