Home > Article > Web Front-end > Detailed explanation of Less installation and usage steps

Detailed explanation of Less installation and usage steps

php中世界最好的语言Original: 2018-05-12 13:55:322551browse

This time I will bring you a detailed explanation of the installation and use steps of Less. 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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" />
</head>
<body>
<p id="box">
  <ul>
    <li>你好</li>
    <li>hello</li>
  </ul>
</p>
</body>
</html>

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!

Detailed explanation of Less installation and usage steps

Related articles