less的简介
- less是一门css的预处理器语言
- less是一个css 的增强版，通过less可以编写更少的代码实现更强大的样式
- 在less中添加了许多的新特性，像对变量的支持，对mixin的支持... ...
- less的语法大体上和css语法一致，但是less中添加了许多对css的扩展
- 所以浏览器无法直接执行less代码，要执行必须先将less转换为css，然后再由浏览器执行
css中的变量和函数
<style>
html {
/*css原生也支持变量的设置*/
--color: #ff0;
--length: 100px;
}
.box1 {
/*calc()计算函数*/
width: calc(1000px/2);
height: var(--length);
background-color: var(--color);
}
.box2 {
width: var(--length);
height: var(--length);
color: var(--color);
}
.box3 {
width: var(--length);
height: var(--length);
border: 10px solid var(--color);
}
</style>
<body>
<div class="box1">aaa</div>
<div class="box2">aaa</div>
<div class="box3">aaa</div>
</body>
css原生也支持变量和函数，由于是比较新的特性，所以对于低版本的浏览器兼容性不好
less初体验
语法
body{
width:100px;
height:100px;
div{
color:red;
}
}
编译后的css文件
body {
width: 100px;
height: 100px;
}
body div {
color: red;
}
less语法
less的配置
"less.compile": {
"compress": false, // remove surplus whitespace(删除多余的空白,也就是是否压缩)
"sourceMap": true, // generate source maps (.css.map files)，生成源映射，用来调试（生成的css代码对应less代码的位置）
"out": true, // 是否生成css文件
}
