5.2 How to use LESS LESS can be used directly on the client side or on the server side. In actual project development, it is recommended to use the third method, which is to compile the LESS file into a static CSS file in advance, and then apply it in the HTML document. For example, in the Bootstrap framework, CSS files are generated in advance by customizing LESS online to improve page response speed. Visit http://www.bootcss.com/custom... to quickly customize the Bootstrap framework style, as shown in Figure 5-2.  Figure 5-2 Online customization of Bootstrap framework style If readers want to use LESS directly, they can compile the application directly on the client or server. The details are as follows. 5.2.1 Using LESS on the client To use LESS on the client, you only need to download the less.js file, and then import it into the HTML document that requires the LESS source file. The following examples demonstrate how to use LESS correctly on the client side. Step 1: Download the less.js file. You can visit http://lesscss.org or http://lesscss.googlecode.com/ to download the latest version (version 1.3.0) of the less.js file. (Visit https://github.com/cloudhead/... to download the uncompressed Master version.) Step 2: Create a LESS file. The LESS file has a similar structure to the CSS file. The difference is that there are many LESS source files. Introduce the variables, functions and other features of programming languages. You can change the CSS file to a LESS file, just change the suffix of the CSS file to .less. Step 3: Create a new HTML5 document and add the following code in the header area of the document:  As you can see, the import method of LESS source files is the same as the import method of standard CSS files. In fact, LESS files It's a style sheet file. It should be noted that when importing a LESS file, you need to set the rel attribute value to "stylesheet/less" to specify the external file type associated with this document as a cascading style; or set the type attribute value to "text/less" to specify The imported external file MIME type is LESS. Tips: The type attribute of the tag must be "text/less". When importing external CSS files, it is customary to set it to "text/css". This can easily cause ambiguity and prevent the external LESS file from being imported correctly.
After importing the external LESS source file, you should import less.js. This JavaScript file serves as a parser for the LESS source file and is responsible for compiling the LESS file into a CSS file and inserting it into the current document. Step 4: Design the HTML document structure, the code is as follows: `
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Please refer to Da Mo’s article: Sass Basics - Color Function
Just look at the source code of frameworks such as bootstrap
5.2 How to use LESS
LESS can be used directly on the client side or on the server side. In actual project development, it is recommended to use the third method, which is to compile the LESS file into a static CSS file in advance, and then apply it in the HTML document. For example, in the Bootstrap framework, CSS files are generated in advance by customizing LESS online to improve page response speed. Visit http://www.bootcss.com/custom... to quickly customize the Bootstrap framework style, as shown in Figure 5-2.

Figure 5-2 Online customization of Bootstrap framework style
If readers want to use LESS directly, they can compile the application directly on the client or server. The details are as follows.
5.2.1 Using LESS on the client
To use LESS on the client, you only need to download the less.js file, and then import it into the HTML document that requires the LESS source file. The following examples demonstrate how to use LESS correctly on the client side.
Step 1: Download the less.js file. You can visit http://lesscss.org or http://lesscss.googlecode.com/ to download the latest version (version 1.3.0) of the less.js file. (Visit https://github.com/cloudhead/... to download the uncompressed Master version.)
Step 2: Create a LESS file. The LESS file has a similar structure to the CSS file. The difference is that there are many LESS source files. Introduce the variables, functions and other features of programming languages. You can change the CSS file to a LESS file, just change the suffix of the CSS file to .less.
Step 3: Create a new HTML5 document and add the following code in the header area of the document:

As you can see, the import method of LESS source files is the same as the import method of standard CSS files. In fact, LESS files It's a style sheet file. It should be noted that when importing a LESS file, you need to set the rel attribute value to "stylesheet/less" to specify the external file type associated with this document as a cascading style; or set the type attribute value to "text/less" to specify The imported external file MIME type is LESS.
Tips: The type attribute of the tag must be "text/less". When importing external CSS files, it is customary to set it to "text/css". This can easily cause ambiguity and prevent the external LESS file from being imported correctly.
After importing the external LESS source file, you should import less.js. This JavaScript file serves as a parser for the LESS source file and is responsible for compiling the LESS file into a CSS file and inserting it into the current document.
Step 4: Design the HTML document structure, the code is as follows:
`