首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > css教程

less.js 输出css怎么查看

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

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

f25ebf535b420d9e47ec61548129356.png

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

以上就是less.js 输出css怎么查看的详细内容，更多请关注php中文网其它相关文章！

cssPHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：写css可以用什么软件 下一条：CSS中的比较函数：max()、min()、clamp()

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！