首页 >web前端 >css教程 >less.js 输出css怎么查看

less.js 输出css怎么查看

藏色散人原创: 2020-12-21 09:39:042373浏览

less.js输出css的查看方法：首先新建一个HTML文档，并引入less.js和main.less文件；然后打开浏览器进行访问；最后按F12打开【开发者工具】，并选取对应的DOM元素即可在右侧看见编译后的css代码。

less.js 输出css怎么查看

本教程操作环境：Windows7系统、less2.6.0&&Chrome76.0&&CSS3版本，该方法适用于所有品牌电脑。

推荐：《css视频教程》

less.js输出css怎么查看？

查看less.js输出css代码的步骤：

1、首先我们新建一个HTML文档，并引入less.js和main.less文件

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;
}

注：link标签的rel属性，改成stylesheet/less

2、然后打开浏览器进行访问，按F12打开开发者工具，选取对应的DOM元素，即可在右侧看见编译后的css代码

注：需要将index.html、main.less、less.js文件放在web服务器中才能运行（我们可以使用相关软件搭建本地web环境，推荐phpStudy V8）

以上是less.js 输出css怎么查看的详细内容。更多信息请关注PHP中文网其他相关文章！

css css3 less html JS dom phpstudy

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：写css可以用什么软件下一篇：CSS中的比较函数：max()、min()、clamp()

查看更多