scss 用法的准备工作，下载 考拉 编译工具 且目录的名字一定不能出现中文，哪里都不能出现中文，否则就会报错
es6 用法
let 和 const
let 声明变量的方式 在 {} 代码块里面才有效；且在相同的代码块，不能声明两个相同的变量名，一旦出了这个{} 代码块 ，此变量无效
const 声明常量的方式 声明完毕后，我们不能轻易的更改声明的常量，（但不代表我们不能更改，只是更改，还不如不用他声明）
字符串介绍：
传统的字符串拼接的方式，麻烦且容易出错，所以我们的 es6 提供了一种新的 字符串拼接的方式 ``
虽然这种写法，确实要比传统的写法高明了许多，但是还是有很多想吐槽的点；
这种写法在字符串里面并不支持 js 语法了，也就是我们并不能进行 for 循环 和 条件判断，使得我们又不得不为此做出很多的处理
但是，比起传统的写法高明了很多，例如，我们使用字符串拼接的话，显得美观又漂亮
用法：我们使用英文下的反引号来代替我们之前的双引或单引 `` （键盘 tab 上面的键）
案例：let a="world";
let b=`hello ${a}`;
console.log(b) // hello world 最终的打印结果
如果我们非要用 字符串拼接的方式来进行页面的渲染，也不是不可能，我们可以使用函数的方式来解决；
案例：function fn(a){
var st= ` <div> ${a} </div> `;
return st;
}
var mt=` <div>${fn("hello")}</div> `;
这样的话 我们 的 mt 变成了 这种结构
<div>
<div> hello </div>
</div>
模块化：
common 是 nodejs 的模块化规范
amd 是 requirejs 的模块化规范
cmd 是 seajs 的模块化规范
而我们的 es6 也提供了我们的模块化规范
浏览器对于 type="module" 都是异步加载的；
模块加载一遍，就不加载了，会从内存中直接读取
开发思路：我们可以把所有的特效 分成不同的 js 文件，最后都放在一个 js 文件里面
es6 模块化的用法
export 向外暴露 变量 或 方法
如果有多个暴露的 变量 和 方法 ，我们使用 逗号 隔开
案例：01.js文件
let a="hello";
let b="world";
export {a,b}
import 接收外面暴露的变量 和 方法
案例：
像 jQuery 这种 插件我们 就可以不使用 export 向外暴露 变量 和方法 ， 直接引入即可
import "jQuery.js";
像 在 01.js 中，我们有暴露的 变量 和 方法，我们就要使用 es6 语法了
import {a,b} from "01.js";
如果在 页面中 引入 模块的内容；我们只能这么写
案例：
<script type="module" src="01.js">
import {a} from "01.js" //我们如果只想使用一个变量，那么引入一个就好了；
console.log(a) // hello
</script>
注意事项：
不管是导出，还是引入，我们都需要 用 {} 将变量 和 方法 括起来 传递出去；
记住，每个 js 文件，或者在 页面中 <script> 中的语法，一旦使用 模块化开发，使用任何东西前，先看有没有引入，有没有暴露变量 和 方法 ，不然就会报错
script 标签的属性，defer 和 async 都是异步执行的；
defer 等页面渲染完，才执行
async 下载完毕就执行，
函数：
...变量名 由...加上一个具体名称的参数标识符组成，不定参数用来标识，不确定的参数
function fn(...value){
console.log(value) //打印的结果为 1,2,3
}
fn(1,2,3)
箭头函数：=> 提供了一种更加简洁的函数书写方式
基本语法：参数=>函数体
var f=v=>v //箭头后面只跟语句的话，代表 return 这条语句
等价于 function f(v){
return v
}
var f=(a,b)=>a+b //箭头后面只跟了语句的话，代表return 这条语句
var b=f(1,2);
console.log(b) //3
总结：当箭头函数没有参数或者多个参数的话，我们应该用 () 来括起来，代码书写的安全模式；
指的是形参的写法：不管参数有没有，都需要用 () 括起来，如果使用箭头函数的话，
多行语句：用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {}，结果会自动返回
当箭头函数要返回对象的时候，为了区分代码块，要用 () 将对象包裹起来
案例：
var f=(id,name)=>({id:id,name:name})
f(6,2) //id=6,name=2;
关于 this 指向问题
函数体里面的 this 跟谁调用有关，谁调用这个函数，this就指向谁，在定时器中 this 通常指向 window，但是通过 => this 便可以指向函数内的 this
声明 类 class
class father{
//这个类里面的内容，讲道理构造器好一点
}
属性的写法
a="hello 我是类的属性"
里面有一个 constructor 的方法，当 new 实例化对象的时候，这个方法就会执行
方法的写法
fn(){
//方法的内容
}
实例化对象
let a=new father() // 注意：实例的时候，还是需要用 new
类的继承
class son extends father{
//这里面书写了子类的属性和方法
}
let b=new son()
这个 b 的实例种功能，便拥有了 father 的属性和方法，也拥有自己的属性和方法
less 用法：
引用 less
第一步：下载 less.js 插件
第二步：写以 .less 为后缀的文件
第三部：引入 less 文件的方式：
在 head 中加入 <link rel="stylesheet/" type="text/less" href="01.less">
引入 js 文件 <script src="less.js"></script>
less 是一门 css 的预处理语言
变量：这些变量都是不言自明的；
@nice-blue:#5b83ad //利用 @ 定义常量
#header{
color:@nice-blue; // 引用常量
}
<div id="header">
<div class="navigation"></div>
<div class="logo"></div>
</div>
less 样式写法
嵌套规则：
#header{
color:black;
.navigation{
font-size:12px;
}
.logo{
300px;
}
}
用 & 操作符 在那个代码块下，& 就代表了谁
作用域：一个 {} 代表一个作用域，凡是在作用域里面定义的常量，便可使用，否则不可以
sass 用法
scss 是 sass 的升级版，拥有了很多强大的功能，因为 scss 包括了 sass 的功能，所以就只说 scss 用法
scss 是一个成熟，稳定，强大的 css 预处理器，scss 是 sass3版，引入了新的语法特性
变量：$变量名：属性值
嵌套：
div{
p{
}
}
引入：@import "scss文件"；
混合：通过 mixin 来分组那些需要在页面中复用的 css 声明
关键字：@mixin include
案例：
声明
@mixin border-radius($radius){
border-radius:$radius;
-ms-border-radius:$radius;
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
}
.box{
引用
@include border-radius(10px);
}
继承：
通过 % 变量名 声明
%message-common{
border:1px solid #ccc;
padding:10px;
color:#333;
}
.box{
引用
@extend %message-common;
border-color:red; //也可以更改里面的额属性
}
操作符：我们可以进行 + - * / %;
600px/960px*100%;
关键字：& 代表父级选择器
.box{
& 代表 .box;
}
另一种嵌套的属性
.demo{
//命令空间后带有冒号
font:{
size:30em;
}
}
翻译过来：
.demo{
font-size:30em;
}