less of CSS preprocessing language

Less is a pre-processing language of CSS, which extends CSS and adds functions such as variables, mixing (mixin) and functions, which makes CSS easier to maintain, make themes and expand.

Less can run on Node, browser, and Rhino platforms. There are many third-party tools on the Internet to help you compile Less source code.

Official website address

http://lesscss.org/

less Handbook

www.lesscss.net/

Introduction of bootstrap official website less

http://less.bootcss.com/

1. Browser-side environment construction
Download address of github: https://github.com/less/less.js

1. Introduction of js
Building the learning environment of Less is very simple, just in < /body > Pass before label < script type="text/javascript" src="less.js" > < /script > By introducing a processor, less can be precompiled into css style on the browser side.

A more effective way is to monitor the less style through the following code and automatically compile it into the css style, thus reducing the tedious steps that we need to press F5 after modifying the less code to see the actual effect.

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

Note: Note that your less style file 1 must be introduced before introducing less. js.

2. css style processing of less
less Inline Styles and Outline Styles

Because we are now using browser-side precompilation, Less can be used in inline style and outreach style.

The inline style is as follows:

<style type="text/less">
 // less  Code 
</style>

The outreach style is introduced as follows:

Note: Note that the value of rel is stylesheet/less

< link rel= "stylesheet/less" type= "text/css" href= "Files.less" rel= "external nofollow"/ >

2. Grammar
1. Notes

//  Single-line comment, not as final output 
/* 
 Multi-line comments to native CSS Adj. /* Notes ....*/ Form as the final output 
*/

2. Variables
Variables in Less have the following rules:

With @ As the starting identifier of a variable, the variable name consists of letters, numbers, _, and-
There is no provision for definition before use;
Take the last defined value as the final value;
Available for rule values, rule attributes, rule attribute parts, selectors, selector parts, string splicing;
When defining "@ variable name: variable value; The form of "; The reference is in the form of "@ variable name" or "@ {variable name}";
Scope exists, and local scope takes precedence over global scope.
Note: Note that copying the code directly from the Web page may cause compilation errors due to 1 white space.

less source code

@color: color;
 @dialog: .dialog;
 @suffix: fix;
 //  Spaces are ignored, and single or double quotation marks are required to preserve them 
 @hi: 'hello ';
 @dear: there ;
 
 .dialog{
 //  Used for  rule Property part, you must use the "@{ Variable name }"  Form of 
 background-@{color}: #888;
 //  Used for  rule Property, you must use the "@{ Variable name }"  Form of 
 @{color}: blue;
 }
 //  Used for   Selector, you must use the "@{ Variable name }"  Form of 
 @{dialog}{
 width: 200px;
 }
 @{dialog}::after{
 content: ': @{hi}@{dear}!'; //  Used for   String splicing, you must use the "@{ Variable name }"  Form of 
 }
 @h: 1000px;
 //  Used for   Selector widget, you must use the "@{ Variable name }"  Form of 
 .ie-@{suffix}{
 @h: 30px; //  Scope exists, and local scope takes precedence over global scope. 
 height: @h; //  Used for   Property value, both forms can be used 
 line-height: 30px;
 }
 
 // 1.  With @ As the starting identifier of a variable, the variable name consists of letters, numbers, _ And - Composition 
 // 2.  There is no provision for definition before use; 
 @dialog-border-color: #666;
 @dialog-border-width: 10px;
 @dialog-border-width: 1px; // 3.  Take the last defined value as the final value; 

Final output:

.dialog {
 background-color: #888;
 color: blue;
}
.dialog {
 width: 200px;
}
.dialog::after {
 content: ': hello there!';
}
.ie-fix {
 height: 30px;
 line-height: 30px;
}

3. gulp compiles less
1. Installation
Global installation: npm install -g less

In-project installation: npm install gulp-less --save-dev

2. Use

var gulp=require("gulp");
var less=require("gulp-less");


gulp.task("less",function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest("src/css"));
});

// Monitor file changes 
gulp.task("watch",function(){
gulp.watch("src/css/*.less",['less']);
});

Reference: https://www.ofstack.com/article/107875. htm