How to install and use Less

This time I will show you how to install and use Less, and what are the precautions for Less installation and use. The following is a practical case, let’s take a look.

node.js installation

Official website: http://nodejs.cn/

Check whether the installation is successful on the command line

Switch to the project directory and initialize a package .json file

Installation and uninstallation of jQuery package (example) Installation

Uninstallation

Install Taobao image

2. Install less

Try it:

test.html

nbsp;html>


  <meta>
  <title>Title</title>
  <link>


<p>
  </p>

    
• 你好
    
• hello
  

style.less

#box{
 width:200px;
 height:200px;
 background-color:blue;
 ul{
  color:white;
  li{
   line-height:50px;
  }
 }
}

Enter lessc xxx.less xxx.css in the command line,

is as follows:

Open test.html with a browser to see the effect 3. Basic usage of less

https:// less.bootcss.com/

Variables

@red:red;
@w:200px;
#big{
  width:@w;
  height:@w;
  background-color:@red;
  #small{
    width:@w;
    height:@w;
    background-color:@red;
  }
}
p{
  color:@red;
}

Mixing

.bt{
  width:200px;
  height:200px;
  border-top:2px solid red;
  background-color:red;
}
#big{
  .bt;
  #small{
    .bt;
  }
}

•Nesting

#box{
  width:100%;
  height:60px;
  background-color:#ccc;
  h3{
    width:100%;
    height:20px;
    background-color:yellow;
  }
  ul{
    list-style:none;   
    li{
      height:40px;
      line-height:40px;
      float:left;
      padding:0 10px;
    }
  }
}

•Operation

@color:#333;
#box{
  width:100%;
  height:60px;
  background-color:@color+#111;
}
•calc()
@var:50vh/2;
#box{
  width:calc(50% + (@var - 20px));
}

•Fixed function

@base:#f04615;
@width:0.5;
#box{
  width:percentage(@width);
  color:saturate(@base,5%);
  background-color:spin(lighten(@base,25%),8);
}

•Comments

//单行注释//
/*多行
 注释*/
•引入其他less文件
@import "other.less";

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

node koa2 mysql bootstrap to build the front and back ends of the forum

##Detailed explanation of usage examples of this in JS

The above is the detailed content of How to install and use Less. For more information, please follow other related articles on the PHP Chinese website!