前端杂谈 · Web

浏览器端直接使用Less文件

•̀.̫•́✧ · 12月1日 · 2019年本文571字 · 阅读2分钟269

在浏览器端之间使用Less文件需要引入一个js插件 less.js 来完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/less" href="../less/test.less" rel="nofollow noopener" >
    <script src="../lib/less/less.min.js"></script>
    <script>less.watch();</script>
</head>
<body>
<h3>在浏览器端使用less</h3>
<p>1.less无法在浏览器端直接使用</p>
<p>2.浏览器不识别</p>
<p>3.必须解析成css代码</p>
<p>4.通过less解析插件(javascript)</p>
<p>5.引入less文件需要加上 type="text/less" </p>
<p>6.less.watch(); 无刷新预览样式</p>
<p>7.以http形式打开网页预览</p>
</body>
</html>

原理

Less.js 插件的原理是使用Ajax,所以需要以HTTP协议打开文件,而不是使用文件协议 file://,然后读取出less文件的内容,语法分析处理成css,插入style标签注入到页面上。

0 条回应