less是css的预处理语言，是css的增强版，通过less可以用更少的代码编写更强大的样式。
css原生变量
这里先介绍下css的不足。
看代码，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
color: #bfa;
}
.box3{
width: 100px;
height: 100px;
border: solid #bfa 10px;
}
</style>
</head>
<body>
<div class="box1">aaa</div>
<div class="box2">aaa</div>
<div class="box3">aaa</div>
</body>
</html>
这里，3个div在不同的地方设置了相同的颜色。如果我们想同时改变它们的颜色，得一个一个的去找，然后修改，这就很麻烦。
要如何处理呢？如果我们设置一个变量，给它赋值#bfa，需要用到这个颜色的地方就给他设置这个变量，这样以后想改就只需要改这个变量的赋值就行了。
css原生支持变量的设置。
<style>
html{
--col:#bfa;
}
.box1{
width: 100px;
height: 100px;
background-color: var(--col);
}
.box2{
width: 100px;
height: 100px;
color: var(--col);
}
.box3{
width: 100px;
height: 100px;
border: solid var(--col) 10px;
}
</style>
通过这种做法，只需要改改col的颜色，就可以同时改变3个。
虽然这个挺不错的，但是它的兼容性不好，比如在ie中就不大行。
另一个点是，当我们在做雪碧图时，需要根据图的宽度或长度计算元素的大小，我们之前的做法是手动算，比如雪碧图有3个图，那么手动把宽度除以3。css中实际上可以用calc（）计算，不需要我们手动计算。
.box1{
width: calc(200px/2);
height: 100px;
background-color: var(--col);
}
同样的，兼容性不大行。
less
我们可以用less来添加许多特性，其中包括对变量的支持。
它的语法与css大致相同，但多了很多扩展，所以没法直接执行，得先转换为html才能执行。
用什么转换呢？
vs code搜索easy less扩展，安装。
然后创建一个less文件写代码。
我写了如下的内容
写完后，vscode会自动给我生成一个对应的css文件。
举例
当我们想给body的子元素div设置字体颜色时，less可以怎么写？
body{
div{
color: red;
}
}
看看和它对应的css是什么。
body div {
color: red;
}
所以我们可以在less中写，这种写法比css的写法更容易理解。
文档
zeal安装less离线文档。
扫一扫
1215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
