Home > Article > Web Front-end > How to view less.js output css
How to view less.js output css
- 藏色散人Original
- 2020-12-21 09:39:042323browse
How to view the css output by less.js: First create a new HTML document and introduce the less.js and main.less files; then open the browser to access; finally press F12 to open [Developer Tools], and Select the corresponding DOM element to see the compiled css code on the right.
The operating environment of this tutorial: Windows7 system, less2.6.0&&Chrome76.0&&CSS3 version. This method is suitable for all brands of computers.
Recommended: "css video tutorial"
How to view the css output by less.js?
Steps to view less.js output css code:
1. First, we create a new HTML document and introduce less.js and main.less files
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet/less" href="main.less">
</head>
<body>
<div class="app">app</div>
<script src="less.min.js"></script>
</body>
</html>main.less
@width: 100px;
@height: 200px;
.app{
width: @width;
height: @height;
background: skyblue;
}Note: Change the rel attribute of the link tag to stylesheet/less
2, then open the browser to access, press F12 Open the developer tools, select the corresponding DOM element, and you can see the compiled css code on the right side
Note: You need to add index.html, main.less, less The .js file must be placed in the web server to run (we can use related software to build a local web environment, phpStudy V8 is recommended)
The above is the detailed content of How to view less.js output css. For more information, please follow other related articles on the PHP Chinese website!