less编译工具kaola：http://koala-app.com/index-zh.html
//kaola基本用法：将含有less文件的文件夹拖入kaola工具中，执行编译就会多出一个和.less文件的同名.css文件
# 浏览器使用less语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/less">
* {
margin: 0;
padding: 0;
}
#header {
color: black;
width: 100%;
height: 100vh;
/* 当可视宽度大于768px时 */
@media screen and (min-width: 768px) {
.box {
height: 100vh;
display: flex;
.div {
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
background: skyblue;
margin: 2px;
}
}
}
/* 当可视区域小于768px时 */
@media screen and (max-width: 768px) {
.box {
height: 100vh;
.div {
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
background: pink;
margin: 2px;
}
}
}
}
</style>
<script src="./less.js"></script>
</head>
<body>
<header id="header">
<div class="box">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
</header>
</body>
</html>
# vue中使用less
安装：npm install less-loader@4.1.0 --save -D
npm install less@3.0.4 --save -D
组件中使用<styel lang="less" scope></style>
