一、less基础
1.1、less开篇
1.什么是CSS预处理器？
CSS预处理器就是用某一种语言用来为CSS增加一些动态语言的特性（变量、函数、继承等。js就是动态语言。）
CSS预处理器可以让你的CSS更加简洁，适应性更强，代码更直观等诸多好处
简而言之：CSS预处理器就是升级版CSS
2.常见的CSS预处理器
Less、Sass、Stylus
3.为什么需要less（CSS缺点）?
3.1、CSS的语法虽然简单, 但它同时也带来一些问题（比如：阅读性不好。阅读css代码看不出元素的关系。）
3.2、CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用,
3.3、造成这些原因的本质源于CSS是一门非程序式的语言, 没有变量/函数/作用域等概念
4.什么是less(Leaner Style Sheets)?
4.1、Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。
4.2、它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展
4.3、一句话：用类似JS的语法去写CSS
5.less基本使用:
5.1、less可以在node.js环境下运行
5.2、less可以在浏览器中直接运行
（a）、浏览器中运行方式一
编写less文件（ <style type="text/less"></style>）-->引入less文件-->引入less.js(http://lesscss.cn/ less中文网站)-->运行
<link rel="stylesheet/less" href="css/index.less">
<script src="js/less.min.js"></script>
注意点:
一定要先引入less.css再引入less.js。不然无效果
less.css引入的写法为 <link rel="stylesheet/less" href="css/index.less">。一定要在rel中添加“/less”
如果less代码是写到单独的文件中, 一定要在服务端环境（webstrom中打开就是服务端环境）运行才能生效。如果直接打开HTML打开，就会无效。
本用法存在的问题：
因为实在运行的时候才通过less.js对.less文件进行加工处理，因此在运行的时候加工处理会产生性能问题。
1.2、less第二种使用方式
（b）、浏览器中运行方式二：
提前预编译
编写less文件-->利用工具转换为css文件-->引入css文件
<link rel="stylesheet" href="css/index.css">
工具转换为css文件常用方法：
1.考拉客户端: http://koala-app.com/index-zh.html（win中安装，不要修改路径）
使用方法如下：
点击“+”号选择.less文件所在文件夹
选中.less文件
点击“Compile”按钮，开始将.less文件转换为.css文件。
出现“success”提示后，点击“Refresh”按钮，编译器中.less下方就会出现转换成功的.css文件
2.开源中国 : https://tool.oschina.net/less（在线转换网站）
3.构建工具配置loader自动编译: 后续课程内容
注意点:
无需引入less.js, 无需在服务端运行
1.3、less中的注释
less中的注释和JS中的注释一样，也有单行注释和多行注释
less中单行注释和多行注释最大的区别在于: 是否会被编译
单行注释不会被编译(不会出现在编译后的CSS文件中)
多行注释会被编译 (会出现在编译后的CSS文件中)
1.4、less中的变量
1.什么是变量？
和js中的概念基本一样
2.less中定义变量的格式：
@变量名: 值；
@h: 200px;
3.less中使用变量的格式
@变量名称；
height: @h;
4.和JS一样可以将一个吧变量赋值给另一个变量
@变量名:@变量名;
5.和js一样less中的变量也有全局变量和局部变量
定义在{}外面的就是全局的变量，什么地方都可以使用
定义在{}里面的就是局部变量，只能在{}中使用
注意点：
less中的变量是延迟加载的，写到后面也能在前面使用
6.和js一样，不同作用域的变量不会相互影响，只有相同作用域的变量才会相互影响
和js一样，在访问变量时会采用就近原则（ 变量也遵循就近原则，自己有的用自己的，自己没有向外找。）
1.5、less中变量插值
注意：企业开发中很少使用
属性名称、标签名称想使用变量，必须使用变量插值的方式
什么是变量插值
在less中如果属性的取值可以直接使用变量，但是如果是属性名称或者选择器名称并不能直接使用变量
如果属性名称或者选择器名称想使用变量中保存的值，就必须使用变量插值的格式
变量插值的格式
格式：@{变量名称}
1.6、less中的运算
方法一：
div{ width: 200px; height: 200px; background: salmon; position: absolute; left: 50%; margin-left: -100px; }
缺点：方式一不适合编码，因为需要我们自己口算元素宽度的一半是多少。
方法二：
div{ width: 200px; height: 200px; background: salmon; position: absolute; left: 50%; transform: translateX(-50%); }
缺点：方式二不利于兼容，因为transform属性是CSS3新增的，只有支持C3属性的浏览器才可以使用。
方法三：
在CSS3中新增了一个calc函数，可以简单实现+、-、*、/运算。
div{ width: 200px; height: 200px; background: salmon; position: absolute; left: 50%; margin-left: calc(-200px / 2);; }
但缺点：同方法二transform一样，有兼容性问题
方法四：
以上方法都有弊端，但是less中的运算就没有弊端了。less使用方法
- less中的运算和CSS3中新增的calc函数一样，都支持：+、-、*、/
- 但在计算过程中要写清楚计算结果的单位，单位写在被除数或者两个都写都可以
div{ width: 200px; height: 200px; background: salmon; position: absolute; left: 50%; margin-left: (-200px / 2); }
1.7、less中的混合
1.什么是less中的混合（Min in）？
将需要重复使用的代码封装到一个类中，在需要使用的地方调用封装好的类即可
在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来
本质就是ctrl + c ——>ctrl +
2.less中的注意点：
如果混合名称的后面没有（），那么在预处理的时候，会保留混合的代码。
如果混合名称的后面加上（），那么在预处理的时候，不会保留混合的代码。
/*.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}*/
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.son{
width: 200px;
height: 200px;
background: salmon;
.center;//混合
}
1.8、less中带参数混合
这里就是带参数的混合
whc(@w, @h, @c){
width: @w;
height: @h;
background: @c;
这里就是带参数的混合,并且带默认值
.whc(@w:100px, @h:200px, @c:pink){
width: @w;
height: @h;
background: @c;
.box1{
/* width: 200px;
height: 200px;
background: salmon;*/
//.whc(200px, 200px, salmon);//这里就是带参数的混合
//这里是给混合的指定形式参数传递数据
.whc(@c:salmon);
}
1.9、less中混合的可变参数
可变参数：“...”就是可变参数代表0个或多个参数
div{
width: 200px;
height: 200px;
background: skyblue;
//transition: all 4s linear 0s;
.animate(all, 4s, linear, 0s);
}
.animate(@name, @time, @mode, @delay){
//transition: @name @time @mode @delay;
transition: @arguments;
}
less中的@arguments和js中的arguments一样，可以拿到传递进来的所有形参
less中的“...”表示可以接受0个或多个参数
如果形参列表中使用了“...”，那么“...”必须写在形参列表的最后
.animate(...){//“...”就是可变参数代表0个或多个参数
transition: @arguments;//transition至少需要传递两个参数
}
.animate(@name, @time, ...){ //“...”就是可变参数代表0个或多个参数
transition: @arguments; //transition至少需要传递两个参数,不然考拉会报错
}
1.10、less中混合的匹配模式
混合中定义的名称如果相同时，后定义的会覆盖先定义的。为了不被覆盖。就产生了匹配模式（就是通过混合的第一个字符串形参，来确定具体要执行哪一个同名混合）
匹配模式格式：在()的最前面自定义一个名称即可
.triangle(Down, @width, @color){ //匹配模式
width: 0;
height: 0;
border-width: @width;
//border-color: #000 #f00 #0f0 #00f;
border-color: @color transparent transparent transparent;
border-style: solid solid solid solid;
}
.triangle(Top, @width, @color){
width: 0;
height: 0;
border-width: @width;
//border-color: #000 #f00 #0f0 #00f;
border-color: transparent transparent @color transparent;
border-style: solid solid solid solid;
}
div{
//.triangle(Top, 80px, green)
.triangle(Right, 80px, green)
}
1.11、less中混合通用匹配模式
@_:表示通用的匹配模式，
通用匹配模式：
无论同名的哪一个混合被匹配了，都会先执行通用匹配模式中的代码，执行了通用匹配模式后，再执行混合
通用匹配模式作用：优化代码
.triangle(@_, @width, @color){
width: 0;
height: 0;
border-style: solid solid solid solid;
}
.triangle(Down, @width, @color){
//width: 0;
//height: 0;
border-width: @width;
border-color: @color transparent transparent transparent;
//border-style: solid solid solid solid;
}
div{
//.triangle(Down, 80px, green)
.triangle(Right, 80px, green)
}
1.12、less文件中导入其它less文件
在less文件头部写下方代码即可，两种方法都可以
@import "triandgle";
@import "triandgle.less";
1.13、less中的内置函数
由于less的底层就是用JavaScript实现的，所以JavaScript中常用的一些函数在less中都支持
1.混杂方法
image-size("file.jpg"); // => 100px 50px
image-width("file.jpg"); // => 100px
image-height("file.jpg"); // => 50px
2.单位转换
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8
3.列表
@list: "A", "B", C, "D";
length(@list); // => 4
extract(@list, 3); // => C
4.数学方法
ceil(2.1) // 向上取整
floor(2.1) // 向下取整
percentage(.3) // 30%转百分比
round(1.67, 1)// 1.7 四舍五入，保留一位小数
sqrt(25cm) // 5cm取平方
abs(-5cm) //5cm 取绝对值
pi(); //圆周率π
max(3px, 42px, 1px, 16px) //42px
min(3px, 42px, 1px, 16px) //1px
5.字符串替换
replace("Hi Tom?", "Tom", "Jack") //Hi Jack
6.判断类型
isnumber(56px); // => true 是否含数字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit(4rem, rem); // => true 是否为指定单位
isruleset(@rules); // => true 是否为变量
7.颜色操作
增加饱和度
saturate(color, 20%)
减少饱和度
desaturate(color, 20%)
增加亮度
lighten(color, 20%)
减少亮度
darken(color, 20%)
降低透明度
fadein(color, 10%)
增加透明度
fadeout(color, 10%)
设置绝对不透明度(覆盖原透明度)
fade(color, 20%)
旋转色调角度
spin(color, 10)
将两种颜色混合，不透明度包括在计算中。
mix(#f00, #00f, 50%)
与白色混合
tint(#007fff, 50%)
与黑色混合
shade(#007fff, 50%)
灰度，移除饱和度
greyscale(color)
返回对比度最大的颜色
contrast(color1, color2)
8.颜色混合
每个RGB 通道相乘，然后除以255
multiply(color1, color2);
与 multiply 相反
screen(color1, color2);
使之更浅或更暗
overlay(color1, color2)
避免太亮或太暗
softlight(color1, color2)
与overlay相同，但颜色互换
hardlight(color1, color2)
计算每个通道(RGB)基础上的两种颜色的平均值
average(color1, color2)
很多，其余查询LESS手册
@str: "../images/1.jpg";
@str2: replace(@str, "1", "2");//内置函数将字符串中的1改为2
div{
width: 200px;
height: 200px;
//background: url(@str2);
background: desaturate(yellow, 50%);//desaturate内置函数，降低颜色的饱和度
}
div:hover{
background: saturate(yellow, 50%);//saturate内置函数，提升颜色的饱和度
}
1.14、less中的层级结构
<div class="father">
<!-- <div class="son"></div>-->
</div>
.father{
width: 300px;
height: 300px;
background: skyblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*
如果在某一个选择器的{}中直接写上了其它的选择器，会自动转换成后代选择器
.son{
// &的作用：是告诉less在转换的时候不要用后代来转换，直接拼接在当前选择器的后面即可。
&:hover{
background: skyblue;
}
width: 200px;
height: 200px;
background: greenyellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
/*使用伪元素*/
&::before{
content:"子元素";
display: block;
background: yellowgreen;
width: 100px;
height: 100px;
}
}
/*这种写法没有实现层级关系
.son:hover{
background: skyblue;
}*/
1.15、less中的继承
1.混合的本质：就是复制粘贴，将类当中的代码放到调用类的的地方。
2.问题：使用混合后，less文件中看上去没冗余代码，但在.css文件中有冗余代码。解决方法：使用less的继承
3.继承的使用方法
继承：使用并集选择器来实现
less中的写法：
.center{ 属性 }
.father:extend(.center) {}//继承
css中通过less的写法实际生成的样式
.center,
.father{
属性
}
4.less中的继承和less中混合的区别
使用时的语法格式不同
转换之后的结果不同（混合是直接拷贝，继承是并集选择器）
1.16、less中的条件判断
在less中可以通过when给混合添加执行限定条件，只有条件满足（为真）才会执行混合中的代码
when表达式中可以使用比较运算符（>、<、>=、<=、=）、逻辑运算符、检查函数来进行条件判断
div{
.size(100px, 100px);
background: skyblue;
}
比较运算符
.size(@width,@height) when (@width = 100px){
width: @width;
height: @height;
}
逻辑或：(),()。相当于JS中的||
逻辑与：()and()。相当于JS中的&&
.size(@width,@height) when (@width = 100px),(@height = 100px){
width: @width;
height: @height;
}
.size(@width,@height) when (@width = 100px)and(@height = 100px){
width: @width;
height: @height;
}
使用函数：
.size(@width,@height) when (ispixel(@width)){//单位是px就执行
width: @width;
height: @height;
}
二、fullpage
2.1、fullpage基本使用
1.什么是Fullpage？
Fullpage.js是一个基于jQuery的插件，它能方便。轻松的制作出全屏滚动网站。
2.什么是jQuery？
用JS封装的一个框架
3.不会jQuery能都学习使用Fullpage么？
编程开发属于一门“做中学”的学科，无论是什么编程语言，我们都不可能等到所有内容都学会才开始编写程序
Fullpage虽然是一个基于jQuery的插件，但是无论是jQuery还是Fullpage都是用JS编写的，所以会JS即可
4.为什么要学习插件或者框架？
在企业开发中因为开发时间、企业成本、惰性因素等
所以并不是所有的功能都需要我们自己实现
大部分情况下一些常用的功能都有现成的插件或者框架
我们只需要找到合适的插件或者框架，快速学习套用即可（俗称搬砖）
5.插件或者框架来源
个人或团队自行封装
百度、谷歌、GitHub
行业交流、技术峰会等
6.如何学习和使用框架
下载框架
查看框架示例程序
阅读框架文档
编写DEMO
7.Fullpage是否开源
个人使用为开源，商用需付费
dist文件夹中是所需的引入文件
examples文件夹中是案例DEMO
vendors文件夹中存放缓动动画
8.使用方法：
8.1.引入文件。顺序如下
<link rel="stylesheet" href="css/fullpage.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/easings.js"></script>
<script src="js/scrolloverflow.js"></script>
<script src="js/fullpage.js"></script>
8.2.加入元素
<div id="fullpage">
<div class="section">some section</div>
<div class="section">some section1</div>
<div class="section">some section</div>
<div class="section">some section</div>
</div>
8.3.初始化
new fullpage('#fullpage', {})
2.2、fullpage常用属性
new fullpage('#fullpage', {
//设置每一屏的背景颜色
sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
//显示指示器。右侧小圆点导航栏是否显示
navigation:true,
//右侧小圆点导航栏的悬停提示文字
navigationTooltips: ['111', '22222', '33333', '444444'],
//右侧小圆点导航栏的提示文字
showActiveTooltip: true,
//改变右侧小圆点导航栏的位置（默认在右侧，可以设置为左边）
navigationPosition: 'left',
// 滚动到底部在滚就去第一屏
loopBottom: true,
// 滚动到定部在滚就去最后一屏
loopTop: true,
// 无限循环滚动
continuousVertical:true,
})
2.3、fullpage常用回调函数
onLeave（origin, destination, direction）
滚动之前调用。一旦用户离开某个节，过渡到新节，就会触发此回调。返回“false”将在移动发生之前取消移动。
origin: 起始部分
destination: 终点部分
direction：将根据滚动方向采用up或down值。
afterLoad(origin, destination, direction)
滚动结束之后执行的方法。
origin: 起始部分
destination: 终点部分
direction：将根据滚动方向采用up或down值。
注意点：第一次进入网页也会调用afterLoad方法，只不过第一次进入网页调用的时候，第一个参数和最后一个参数是null
new fullpage('#fullpage', {
sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
navigation:true,
onLeave: function (origin, destination, direction) {
console.log("滚动之前调用", origin, destination, direction);
},
afterLoad: function (origin, destination, direction) {
console.log("滚动之后调用", origin, destination, direction);
}
})
2.4、fullpage常用方法
除了使用鼠标滚轮切换屏幕，也可以使用方法实现切换
2.5、fullpage自定义菜单
点击按钮，跳到对应的屏
<script src="js/jquery-3.3.1.js"></script>
<script src="js/easings.js"></script>
<script src="js/scrolloverflow.js"></script>
<script src="js/fullpage.js"></script>
<ul id="myMenu" style="position: fixed; z-index: 999">
<li data-menuanchor = "firstPage" class="active"><a href="#firstPage">第一节</a></li>
<li data-menuanchor = "secondPage" class="active"><a href="#secondPage">第二节</a></li>
<li data-menuanchor = "thirdPage" class="active"><a href="#thirdPage">第三节</a></li>
<li data-menuanchor = "fourthPage" class="active"><a href="#fourthPage">第四节</a></li>
</ul>
<div id="fullpage">
<div class="section">some section111111</div>
<div class="section">some section2222222</div>
<div class="section">some section33333</div>
<div class="section">some section4444444</div>
</div>
new fullpage('#fullpage', {
sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
navigation:true,
anchors:['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
menu: '#myMenu',
});