1.什么是less?
less是一门CSS预处理语言（不能直接渲染页面，要编译成CSS文件才可以），它是对CSS的扩充，增加了变量、函数、嵌套的功能，让网页开发中的CSS更容易维护，提高开发效率。
2.如何安装less？
- 在命令行：npm install -g less
- 验证less有没有安装成功？lessc -v
- 创建一个less文件，书写less代码
- .编译less文件
方式1： 命令行 lessc *.less *.css
lessc *.less *.css -x (压缩)
方式2： 使用koala外部编译文件
注意事项：可以选择压缩；
可以监听less文件的变化，自动编译；
可以生成资源地图文件
方式3：针对于webstorm配置自动编译而来
File->setting->File watcher->右上角加号（新建）
Less的语法
注释
注释：
//单行注释
/**/多行注释
单行注释编译之后不保留，多行注释编译之后会保留
变量
- 为什么使用变量？
将重复使用的CSS属性定义为变量，可以重复使用，方便后期CSS的维护。
2. 定义变量的语法
@ 变量名称：变量值（css的值）
注意：变量值必须符合CSS的规范
3. 变量的使用
在选择器中属性的名称：@变量
生成的CSS代码
注意事项：
变量与字符串拼接时，需要使用{}将变量名称包裹起来，并且@符号放在{}外面
混合
Mixins有点像函数，在定义之后，可以通过名称调用。（也支持动态传参）。
混合可以将一个定义好的classA轻松的调用到另一个classB中，从而简单实现classB继承classA中的所有属性。我们还可以带参数的调用，就像调用函数一样。
1.什么是Mixins混合？
简单来说就是函数，可以封装CSS，在别的选择器中调用，提高代码的重用性和可用性。
2.定义混合的语法：
定义混合：
.混合名（）{
//封装的CSS代码
}
.混合名（@参数名称：默认值）{
//封装的CSS代码
}
调用混合
h1{
.混合名称（）；
}
h2{
.混合名称（参数的值）；
}
3.示例
生成的CSS代码
模式匹配
1. 模式匹配的含义
相当于定义相同的混合名称，根据分支的值决定执行哪个分支，但是有一个公共的分支（任何分支都会调用）。
@_表示匹配所有，通常用于定义公共部分。
2. 模式匹配的使用形式
生成的CSS代码
颜色函数
- 色彩三要素：色相（颜色的名称）、饱和度（鲜艳程度）、明度（明暗程度）
- 颜色函数
亮度
lighten(@color，10%) //比@color亮10%的颜色
darken(@color，10%) //比@color暗10%的颜色
饱和度
saturate（@color, 10%） //比@color浓10%的颜色
desaturate (@color ，10%) //比@color淡10%的颜色
色相
spin(@color ,10) //色相值增加10
spin(@color ,-10) //色相值增加10
mix(@color1, @color2) //混合两种颜色
3. 示例
生成的CSS代码：
嵌套
1. 什么是嵌套？
具有层级关系的CSS样式，CSS的层级最终是由HTML的结构决定的。
2. 嵌套用在哪里？
用在具有后代关系和父子关系的选择器中，这样很大程度上减少了代码量，并且代码结构看起来更加清楚。
3. 如何使用嵌套？
爷爷容器{
//爷爷的样式
大伯容器{
//大伯自己的样式
&>*{
大伯所有儿子的样式
}
大伯儿子容器{
}
}
爸爸容器{
//爸爸自己的样式
儿子容器{
}
}
二叔容器{
//二叔自己的样式
二叔儿子{
}
}
}
使用&符号表示父元素：父子、兄弟、邻居、伪类
4.示例
@width_header: 1000px;
@height_header: 100px;
@bgColor: green;
@bgImage: '../img';
*{
margin: 0;
padding: 0;
}
header{
margin: 0 auto;
width:@width_header;
height: @height_header;
background-color: @bgColor;
display: flex;
#logo{
width: 180px;
height: @height_header;
background: url('@{bgImage}/bg.jpg') no-repeat;
}
ul{
list-style-type: none;
width: @width_header - 180px;
display: flex;
justify-content: space-around;
li{
width: (@width_header - 180px)/10;
height: @height_header;
background-color: pink;
line-height: @height_header;
text-align: center;
a{
text-decoration: none;
font-size: 50px;
&:link{
color: red;
}
&:visited{
color: yellow;
}
&:hover{
color: blue;
}
&:active{
color: purple;
}
}
}
}
}
生成的CSS代码
* {
margin: 0;
padding: 0;
}
header {
margin: 0 auto;
width: 1000px;
height: 100px;
background-color: #008000;
display: flex;
}
header #logo {
width: 180px;
height: 100px;
background: url('../img/bg.jpg') no-repeat;
}
header ul {
list-style-type: none;
width: 820px;
display: flex;
justify-content: space-around;
}
header ul li {
width: 82px;
height: 100px;
background-color: pink;
line-height: 100px;
text-align: center;
}
header ul li a {
text-decoration: none;
font-size: 50px;
}
header ul li a:link {
color: red;
}
header ul li a:visited {
color: yellow;
}
header ul li a:hover {
color: blue;
}
header ul li a:active {
color: purple;
}
运算符
- 运算符的作用：可以对角度,颜色，宽度，高度等进行运算。
- 运算符的分类：加法，减法，乘法，除法。
- 示例：
注意：如果运算之间含有常数，需要空格将运算符空开。
