Home > Web Front-end > JS Tutorial > body text

How to install and use Less

php中世界最好的语言
Release: 2018-05-23 14:31:46
Original
1264 people have browsed it

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

node.js is a front-end framework that comes with a package management tool npm

node.js installation

Official website: http://nodejs.cn/

#Verify on the command line whether the installation is successful

Switched to the project directory and initialized a package.json file

Installation and uninstallation of jQuery package (example) Installation

Uninstall

Install Taobao image

2. Installation 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>
Copy after login

style.less

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

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

is as follows:

Open test.html with a browser and take a look Effect bar 3. Basic usage of less

https://

less.bootcss.com/Variable

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

Mixing

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

•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;
    }
  }
}
Copy after login

•Operation

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

•Fixed function

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

•Comments

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

I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use call and apply in JS


What are the ways to automate vue forms

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!