html中使用less
日常开发的时候经常有需要写一个单页面测试,但是写less习惯了之后再去写css,less中的嵌套,混入,变量,等等这些语法css是不支持的,严重影响了开发效率,这时候我们可以借助less.js来提高效率
css部分,这里要修改type为text/less 同时加上lang="less"
1
2
3
4
5
6
7
8
| <style type="text/less" lang="less">
.test{
background-color:#f00;
.item{
color:blue;
}
}
</style>
|
less.js引入
1
2
3
4
|
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.js"></script>
|
tip:这里引入js包一定要放在style标签下面,否则会出现不能编译的问题
完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在html中使用less</title>
<style type="text/less" lang="less">
.test{
background-color:#f00;
.item{
color:blue;
}
}
</style>
</head>
<body>
<div class="test">
<div class="item">hello world</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.js"></script>
</body>
</html>
|
运行结果
