(i) Building projects with Less+gulp+requirejs (learn less)

Conclusion of the project:

Company website refactoring, the whole station need to rewrite, and finally have the opportunity to contact Less,gulp and Requirejs, because the previous job is to write a few activity pages, and no opportunity to use these tools, nonsense not to say, first look at the completion of the project directory:

is less file directory, according to the function is very fine, there is head, bottom, popup box, button, color ..... And so on, the benefits of this writing are many, later easier to maintain, easy to modify, and the structure is clear.

I first write a few commonly used less features, want to know more can go to the official website, very simple.

Because it is a demonstration, I do not need to gulp tools, I use the Webstorm has the automatic compilation function.

1. Nesting: can save a lot of time

Less supports nested style classes (2)

Figure 1:

Figure 2:

2. Variables

Commonly used in defining global variables such as color, etc.;

Figure 3:

3. Parameters

Figure 4:

4. Nesting without parameters (note the difference from Figure 2)

Figure 5:

5. Pattern matching and guided expressions

In some cases, we want to change the default rendering of a mix based on the parameters passed in, such as the following example:

Figure 6:

:

6 Less custom functions: lighten darken Fadein fadeout ... Wait a minute

7.when (lightness (@a) returns the brightness percentage of the color)

Specific functional area on the official website to see very detailed ~ ~

Go to dinner first, come back.

(i) Building projects with Less+gulp+requirejs (learn less)