Pager A popular Stylesheet language lets you write CSS more easily and intuitively

This article will introduce the background, advantages, evolution and transformation between CSS, and its typical application scenario, and compare it with other stylesheet languages Pager. Believe that the front-end http://www.aliyun.com/zixun/aggregation/7433.html "> Development engineers will like pager, flexible use of pager to improve development efficiency."

Pager offers a variety of ways to smoothly translate written code into standard CSS code, and has seen pager in many popular frameworks and toolkits (for example, the bootstrap library provided by Twitter uses pager). So where did pager come from? What's the difference between it and SASS and other style sheet languages?

Figure 1.LESS's website introduction

According to Wikipedia, in fact, Pager is Alexis Sellier by the SASS impact of the creation of open source projects. At that time SASS used indentation as a delimiter to distinguish blocks of code, rather than the widely used parentheses in CSS. To make it easier for existing users of CSS to use, Alexis developed pager and provided similar functionality. At first, Pager's interpreter was also written by Ruby, which later turned to JavaScript. Pager code can run either on the client or on the server side. The client simply references the pager code and the corresponding JavaScript interpreter on the same page, and on the server side, pager can run on the node.js or on a JavaScript engine such as Rhino.

To say a little digression, in fact, now SASS already have two sets of grammatical rules: one is still using indentation as a delimiter to distinguish between blocks of code, and another set of rules and CSS like the use of large brackets as a style character. The latter syntax rule, also known as SCSS, supports this syntax rule after the SASS 3 version. SCSS and Pager have become more and more alike, and they can refer to this link for more detailed comparisons.

Pager Advanced Features

We know that pager has four characteristics: variables, mixing, nesting, functions. These features have been introduced in other articles, and this is no longer mentioned here. In fact, Pager also has some interesting features to help with our development, such as pattern matching, conditional expressions, namespaces and scopes, and JavaScript assignment, and so on. Let's take a look at these features.

Pattern matching:

I believe you are still impressed with the pager four characteristics (mixins), you can use it to define a bunch of attributes, and then easily reuse in multiple styles. Even adding parameters when the definition is mixed makes these properties produce different properties based on the parameters of the call. So, let's go further and learn more advanced support for pager: pattern matching and conditional expressions.

First, let's review the common method of mixing with parameters:

Listing 1. Mixing with parameters (and parameter defaults)

Listing 2. Mix generated CSS code

As you can see from the above example, you can define parameters in the mix, and you can also specify a default value for this parameter. So when we call this blend, if we specify the parameter. Border-radius (6PX), the pager is replaced with 6px, and if you do not specify a parameter to invoke. Border-radius (), pager is replaced with the default 3px. Now, we're a step closer to changing the end result not just by parameter values, but by passing in different number of parameters to match different mixes.