scss 用法 及 es6 用法讲解

　　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;

　　}

转载于:https://www.cnblogs.com/shangjun6/p/11068014.html