css预处理器和后处理器_预处理器简介

css预处理器和后处理器

One of the most significant advancements of 2013 was the maturation of tooling and workflow processes for web developers, including the use of preprocessors for CSS and (to a lesser extent) HTML. But between shortcuts, preprocessors, frameworks and postprocessors, it’s easy to become confused in the welter of tooling technologies.

2013年最重要的进步之一是针对Web开发人员的工具和工作流程流程的成熟，包括对CSS和(在较小程度上)HTML使用预处理器。 但是在快捷方式，预处理器，框架和后处理器之间，很容易混淆工具技术。

In this introduction, I'll explain what role each technology takes in the modern web development workflow.

在本简介中，我将解释每种技术在现代Web开发工作流程中扮演什么角色。

For all their power, modern web browsers understand only a few things: HTML, CSS, JavaScript, and a few media formats. It is the limitations of these formats that generate the need for assistive technologies. Perhaps the easiest way to understand each is to categorize how closely the tool is integrated with fundamental web technologies.

现代Web浏览器尽其所有能力，仅能理解几件事 ： HTML ， CSS ， JavaScript和一些媒体格式。 正是这些格式的局限性导致了对辅助技术的需求。 理解每种工具最简单的方法可能是对工具与基本Web技术的集成程度进行分类。

捷径 (Shortcuts)

Everyone should be familiar with keyboard shortcuts in operating systems and applications. Naturally, the same techniques can be applied to web technologies. Shortcut tools such as Emmet allow you to quickly generate code by expanding codes and keywords via macros. The limitation of these systems is that they are one-way processes that map directly to CSS and HTML: once you expand a keyword, the code it generates is “baked” into the file, and there is no way to undo it other than by removing the generated code and retyping a new shortcut. Shortcuts are used directly on the document as you are writing it: styles.css, index.html, etc.

每个人都应该熟悉操作系统和应用程序中的键盘快捷键。 自然地，相同的技术可以应用于网络技术。 Emmet等快捷工具使您可以通过宏扩展代码和关键字来快速生成代码。 这些系统的局限性在于它们是直接映射到CSS和HTML 的单向过程：展开关键字后，其生成的代码将被“烘焙”到文件中，除通过删除生成的代码并重新键入新的快捷方式。 快捷键在编写文档时直接在文档上使用： styles.css ， index.html等。

Some technologies, such as Markdown, may be used as either shortcuts or preprocessors,depending on the context.

根据上下文，某些技术(例如Markdown)可用作快捷方式或预处理器。

预处理器 (Preprocessors)

Preprocessors create code that is interpreted into a syntax that browsers understand. Preprocessor code is often kept as a separate source file,and only interpreted into the target code when it is saved or accessed by the browser. For example, a Sass file may be saved as a .scss document, and interpreted into a .css file that is used by the final site. This allows far greater flexibility in coding, but potentially creates a reliance on the toolset: while the code generated must ultimately be CSS or HTML, it may be very complex and difficult to change without access to the original source file and tool.

预处理器创建代码，这些代码被解释为浏览器可以理解的语法。 预处理程序代码通常被保存为单独的源文件，并且仅在被浏览器保存或访问时才解释为目标代码。 例如，一个Sass文件可以另存为.scss文档，并解释为最终站点使用的.css文件。 这在编码方面提供了更大的灵活性，但可能会依赖工具集：尽管生成的代码最终必须是CSS或HTML，但如果不访问原始源文件和工具，它可能非常复杂且难以更改。

Frameworks are a very similar idea to preprocessors, but are more commonly interpreted “on the fly” by the browser, rather than being processed into target code during development.

框架与预处理器非常相似，但是浏览器更容易“即时”解释框架 ，而不是在开发过程中将其处理为目标代码。

后处理器 (Postprocessors)

Tools that manipulate code after it has been integrated with the site. A script such as –prefix-free is a good example of this, adding vendor prefixes “live” to a site’s stylesheet after it has been published.

在将代码与站点集成之后操纵代码的工具。 例如–prefix-free这样的脚本就是一个很好的例子，在网站的样式表发布后，在网站的样式表中添加“实时”的供应商前缀。

It’s important to understand that these tools are not necessarily exclusive of each other: it is entirely possible to use a shortcut tool like Emmet in Sass within the context of a framework. For beginners, it’s probably easier to merge these new technologies one at a time with their existing workflow, rather than taking them all on at once.

重要的是要了解这些工具不一定彼此排斥 ：在框架的上下文中完全有可能在Sass中使用Emmet之类的快捷工具。 对于初学者而言，一次将这些新技术与他们现有的工作流程合并起来可能要容易得多，而不是一次全部将它们融合在一起。

Hopefully this brief explanation has helped clear up the differences between these technologies. I’ve touched on shortcut tools in past articles; in 2014, I’ll turn my attention to mature preprocessor tools.

希望这一简短的解释有助于清除这些技术之间的差异。 在过去的文章中，我谈到了快捷方式工具。 2014年，我将注意力转向成熟的预处理器工具。

翻译自: https://thenewcode.com/804/Introduction-to-Preprocessors

css预处理器和后处理器