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{
width: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; //也可以更改里面的額屬性
}
操作符：我們可以進行 + - * / %;
width:600px/960px*100%;
關鍵字：& 代表父級選擇器
.box{
& 代表 .box;
}
另一種嵌套的屬性
.demo{
//命令空間后帶有冒號
font:{
size:30em;
}
}
翻譯過來：
.demo{
font-size:30em;
}