css预处理器和后处理器_CSS预处理器介绍

css预处理器和后处理器

CSS Preprocessors are increasingly becoming a mainstay in the workflow of front end web developers. CSS is an incredibly complicated and nuanced language, and in an effort to make it’s usage easier, developers often turn to using preprocessors such as SASS or LESS.

CSS预处理器正日益成为前端Web开发人员工作流中的Struts。 CSS是一种非常复杂和细微的语言，为了使它的使用更加容易，开发人员经常转向使用SASS或LESS之类的预处理器。

CSS Preprocessors compile the code which is written using a special compiler. They then use that to create a CSS file, which can then be referenced by the main HTML document.

CSS预处理器编译使用特殊编译器编写的代码。 然后，他们使用该文件创建CSS文件，然后可以由主HTML文档引用。

When using any CSS Preprocessor, you will be able to program in normal CSS just as you would if the preprocessor were not in place. The good thing is you also have more options available to you. Some, such as SASS, has specific style standards which are meant make the writing of the document even easier, such as the freedom to omit braces if you want.

当使用任何CSS预处理器时，您将能够在普通CSS中进行编程，就像在没有预处理器的情况下一样。 好消息是您还可以使用更多选择。 有些文件(例如SASS)具有特定的样式标准，这意味着使文档的编写更加容易，例如可以随意省略花括号。

Of course, CSS Preprocessors also offer other features as well. Many of the features offered are incredibly similar across preprocessors, with only slight variances in syntax. Thus, you can choose pretty much any one you wish, and you will be able to achieve the same things. Some of the more useful features are:

当然，CSS预处理器还提供其他功能。 所提供的许多功能在预处理器之间非常相似，只是语法略有不同。 因此，您可以选择几乎任何您想要的人，并且您将能够实现相同的目标。 一些更有用的功能是：

变数 (Variables)

One of the most commonly used item in any programming language is the variable, something which CSS notably lacks. By having variables at your disposal, you may define a value once, and reuse if throughout the entire program. An example of this in SASS would be:

在任何编程语言中，最常用的项目之一就是变量，而CSS显然缺少此变量。 通过使用变量，您可以定义一个值，然后在整个程序中重复使用。 SASS中的一个示例是：

$yourcolor: #000056
.yourDiv {
  color: $yourcolor;
 }

By declaring the SASS yourcolor variable once, it is now possible to reuse this same exact color throughout the entire document without ever having to retype the definition.

通过一次声明SASS yourcolor变量，现在可以在整个文档中重用相同的确切颜色，而无需重新输入定义。

循环 (Loops)

Another common item in languages are loops, something else CSS lacks. Loops can be used to repeat the same instructions multiple times without having to be reentered multiple times. An example with SASS would be:

语言中的另一个常见项目是循环，而CSS是缺少的。 循环可用于多次重复相同的指令，而不必多次重新输入。 使用SASS的示例为：

@for $vfoo 35px to 85px {
  .margin-#{vfoo} {
    margin: $vfoo 10px;
   }
 }

This loop saves us from having the to write the same code multiple times to change the margin size.

此循环使我们不必多次编写相同的代码来更改页边距大小。

If / Else陈述 (If/Else Statements)

Yet another feature which CSS lacks are If/Else statements. These will run a set of instructions only if a given condition is true. An example of this in SASS would be:

CSS缺少的另一个功能是If / Else语句。 仅当给定条件为真时，它们才会运行一组指令。 SASS中的一个示例是：

@if width(body) > 500px {
  background color: blue;
 } else {
  background color: white;
 }

Here, the background color will change color depending on the width of the page’s body.

在这里，背景颜色将根据页面主体的宽度而改变颜色。

These are but a few of the major functions of CSS Preprocessors. As you can see, CSS Preprocessors are incredibly useful and versitile tools. Many web developers use them, and it is highly recommended to learn at least one of them.

这些只是CSS预处理器的一些主要功能。 如您所见，CSS预处理器是非常有用且用途广泛的工具。 许多Web开发人员都使用它们，强烈建议学习至少其中之一。

更多信息： (More Information:)

• The best CSS tutorials

  最好CSS教程

• SASS docs: http://sass-lang.com/

  SASS文档： http ： //sass-lang.com/

• SASS, a preprocessor for your web garnishes

  SASS，用于Web的预处理器

• LESS docs: http://lesscss.org/

  更少的文档： http ： //lesscss.org/

• Stylus docs: http://stylus-lang.com/

  触控笔文档： http : //stylus-lang.com/

翻译自: https://www.freecodecamp.org/news/css-preprocessors/

css预处理器和后处理器