Using pager to simplify the writing of cascading style sheets (CSS)

CSS (cascading style sheets) is a time-honored, markup language that is widely used in the World Wide Web, along with HTML. Wide HTML is primarily responsible for the definition of the document structure, and the CSS is responsible for the definition of the document representation or style.

As a markup language, CSS syntax is relatively simple, the user's requirements are lower, but also bring some problems: CSS needs to write a large number of seemingly illogical code, inconvenient maintenance and expansion, not conducive to reuse, especially for non-front-end Http://www.aliyun.com/zixun /aggregation/7433.html "> Development engineers, often because of lack of CSS authoring experience and difficult to write well-organized and easy to maintain CSS code, the reason for these difficulties is that CSS is a non-programming language, no variables, functions, Scope (scope) concepts. Pager for WEB developers, it is based on the syntax of CSS, introduced variables, mixins (mixed), operations and functions such as functions, greatly simplifying the writing of CSS, and reduce the maintenance cost of CSS, as its name says, pager It allows us to do more with less code.

Pager principle and use way

Essentially, pager contains a set of custom syntax and a parser that the user can use to define their own style rules, which eventually compile and generate the corresponding CSS file through the parser. Pager does not cut the original features of CSS, not to replace the CSS, but in the existing CSS syntax based on the CSS to add the characteristics of the program language. Here is a simple example:

Listing 1. Pager file

The compiled CSS file is as follows:

Listing 2. CSS file

From the above example can be seen, learning Pager is very easy, as long as you understand the basics of CSS can be easily used.

Pager can be used directly on the client or on the server side. In the actual project development, we recommend the use of a third way, the pager file compiled to generate a static CSS file, and in the HTML document application.

Client

We can use the. Pager (pager source file) directly on the client, just download the less.js file from http://lesscss.org and add the following code to the HTML where we need to introduce the pager source file:

Pager source files are introduced in the same way as standard CSS files:

Note that the Rel property is set to "Stylesheet/less" when the. pager file is introduced. There is a more important point to note is: Pager source files must be introduced before the introduction of Less.js, so as to ensure that pager source files correctly compiled parsing.

Server-side

Pager on the server side is mainly through the use of pager compiler, the pager source files compiled to generate the final CSS file, the current common way is to use node's Package Manager (NPM) to install pager, after the successful installation of the pager source files in the node environment can compile.

In the early stages of project development, whether we use the client or the server side of the use, we need to find ways to use the CSS or pager file to our HTML page or bridge files, Pager provides a very familiar feature-importing. We can use this keyword to introduce the. Pager or. css file that we need. As：

@import "Variables.less";

The. Pager file can also omit the suffix name, like this:

@import "Variables";

The introduction of CSS is the same as the pager file, except that the. css suffix name cannot be omitted.

Static CSS files generated using compilation

We can use the pager compiler to compile the pager file into a CSS file and introduce it in an HTML article. The point to emphasize here is that pager is completely compatible with CSS syntax, that is, we can change the standard CSS file directly into the. Pager format, and the pager compiler can fully identify it.