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:042341browse

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.

How to view less.js output css

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

How to view less.js output css

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!

Statement:
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