CSS Advanced-less (Introduction) _less

Less introduction

Less for WEB developers, it is based on the syntax of CSS, introduced variables, mixin (mixed), operations and functions such as functions, greatly simplifying the writing of CSS, and reduce the maintenance cost of CSS, as its name says, less It allows us to do more with less code. Less installation (sublime)

To install the LESS2CSS plugin:
Method: Ctrl+shift+p>install package> input LESS2CSS Press ENTER

Installing the less plugin
Method: Ctrl+shift+p>install package> input Less press ENTER

Also you have to install Node.js to refer to the tutorial installation in the Rookie tutorial (http://www.runoob.com/nodejs/nodejs-install-setup.html)

Install less
The cmd command is entered separately under:
NPM Install-g Less
NPM Install Less-plugin-clean-css
It is suggested that the sublime can be restarted after installation.

Next we can build a simple less file to test the code for the less file as follows:

div{
    height:100px;
    width:200px;
    . border;
}
Basic mix
. border{
    border:2px solid black;

mixed with Parameters
. border_02 (@border_width) {
    border: @border_width solid black;

border_02_test{
    . border_02 (10px);
}

mixed with default parameters
. border_03 (@border_width: 10px, @color: black) {
    border: @border_width solid @color;
}
. border_03_test1{
    . border_03 ();
border_03_test2{
    . border_03 (20px,red);

When saved, a corresponding CSS file is generated under the same folder, which reads: