es6 字符串
对页面渲染的几种方式：字符串拼接 文档碎片 dom操作 模板
es6 又提供了一种新的对页面渲染的方式：字符串模板（高级版的字符串拼接）
模板字符串标识符是 反引号 （ `` ） 英文状态下 tab 上面的键，字符串直接写，遇到变量写在 ${} 内；
var name="hello world";
案例：var sd=` 这种写法真好 ${name} `; // 这种写法还会把空格保留下来 ，但是当模板用的话，注意： js 语句 在 `` 中并不友好
es6 对象
es6 允许将变量和函数作为对象的属性和方法
案例：
var name="zhangsan";
function fn(){
console.log(123)
}
var obj={
name:name, // 可省略为 name 第一个name 属性，第二个name 变量
fn:fn, // 可省略为 fn 第一个 fn 属性，第二个是 fn 函数
[name]:name // 第一个[name] 代表了 name 变量，第二个name 代表了 name 变量
}
console.log(obj.name); // zhangsan
obj.fn(); // 123
以上案例的注意点：
1. 当变量名和属性名相同的时候才能省略
2. 将一个变量值写成对象的属性，一定要加 [] ， 如果不加 [] 属性，就是 name ，加上 [name] 就是 name 变量的属性值
对象的两个关键字 set get
get 代表取值 set 代表存值
案例：
var obj={
haha:"zhangsan",
get name(){ // get name 是一个取值的方法 名字必须是 name ，不能随便取名
return name // get 关键字 当 obj.name 是时候就会触发这个函数，但是的是什么，name 的属性就是什么
},
set name(val){ // set name 是一个存值的方法 名字必须是 name，不能随便取名
name=val; // val 当给 name 赋值的时候，就会触发这个方法
return name;
}
}
console.log(obj.name); // 会触发 get name
obj.name="lisi"; // 会触发 set name
console.log(obj.name);
less
变量：
使用 @ 符 定义变量，用 : 赋值
案例：@w:100px;
定义类：案例
@.po:red; // 前者变量 后者类名
@{.po}{ // 这里的 po 就代表了 red 这个类
}
混入：将一个选择器混到另一个选择器中
案例：
.po{
position:absolute;
}
.p{
.po; // 在每个 less 语法后面都要加 ; 号， 引入方式同名即可
left:10px;
}
另一种写法
.po(){
position:absolute;
}
div{
.po()
}
一个是带（） 一个是不带（） 这两种写法的区别是什么？
带（） 代表编译后的 css样式，不会在定义的时候显示出来，只会在使用的时候显示出来
不带（） 代表编译后的 css样式，会在定义的时候显示出来，只会在使用的时候显示出来
嵌套：
主要是：css 后代，子代，伪类
less 实现 后代写法
div{
p{
}
}
less 实现 子代写法
div{
>p{
}
}
less 实现伪类写法
div{
&:hover{ // & 关键字，是一个连接符，代表当前父类的选择器
}
}
函数的默认值；
.div($w:100px,$h:100px,$bg:red){ // 默认值，形参默认值写法 ，可以在调用的时候不传值，如果没有默认值的话，在调用的时候，必须输入值，否则就会报错
width:$w;
height:$h;
background:$bg;
}
导入：@import "路径" 引入其他的 less 文件
循环：是迭代循环，函数内部调用函数本身 还需要使用的函数 when()
案例：
.loop(@n) when(@n>0){ //使用递归的方法进行循环，这种写法叫迭代 when 作为条件判断
width:(100px*@n);
.loop((@n)-1); // 如果我们对变量使用()的话，他会认为变量是 n-1 就会报错，因为没有这个变量，所以我们使用 () 括起来；
}
div{
.loop(5)
}
继承：extend 让一个选择器去继承另一个选择器，就是让我们实现 并级选择器
为什么使用并级选择器；当我们里面的样式相同的时候，如果我们进行 复制，粘贴操作的话，无疑是增加了我们的代码量；使用并级的话可以减少我们的代码量（但也减不了多少行）
写法：
html 结构
<div class="cla">
<div class="dd"></div>
</div>
.div{ // 这个 div 我们实现一个上下左右居中的效果
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:200px;
height:200px;
background:pink;
}
extend 的两种引入方式
第一种：
.cla{
width:400px;
height:400px;
position:relative;
background:green;
.dd:extend(.div){} // 这个代码块里，就继承了 .div 定义的代码
}
第二种：
.cla{
width:400px;
height:400px;
position:relative;
background:green;
.dd{
&:extend(.div all); // 这种写法是和第一种写法一样的效果 all 代表继承了跟 .dd 相关的所有选择器
}
}