标签：scss es6 关键字 用法 width p2r div 100

　　scss　　是 sass 的升级版

　　是一个成熟，稳定，强大的 css 预处理器，scss 是 sass3版 引入的新语法特性；

　　scss文件，不怎么支持中文，所以：我们要在开头 写上 @charset "utf-8";

　　$变量名　　声明变量的方式；

　　引入 scss 文件　　通过 @import "scss文件";

　　函数：算法（使用场景：我们可以在 scss 文件，进行 加 减 乘 除）

　　案例： 

　　@function p2r($width){

　　　　@return ($width/32)*1rem;

　　}

　　div{

　　　　width:p2r(100);

　　}

　　注意：涉及到 sass 语法 或者 javascript 语法；要用@；

　　混入样式：（使用场景：有很多相同的样式的时候使用，我们也里面使用 函数算法 ）；

　　关键字 @mixin（定义）　　@include（引入）　　

　　案例：

　　@mixin bg($width,$height,$url){

　　　　width:p2r($width);

　　　　height:p2r($height);

　　　　background:url($url) no-repeat;

　　}

　　div{

　　　　@include bg(100,100,"01.png");

　　}

　　嵌套：一种颠覆 css 写法的

　　div{

　　　　//这里写div 的样式

　　　　p{

　　　　　　//这里写 p 的样式

　　　　　　& 关键字：代表 p 

　　　　}

　　　　& 关键字 ：代表div

　　}

　　<div>

　　　　<p></p>

　　</div>

　  scss 的编辑 css 后的结果：

　　div p{

　　}

　　es6 的介绍：

　　　　let 和 const 关键字

　　　　用法：避免污染全局变量；

　　　　所以：在 { } 里面 变量才有效；

　　　　声明变量和常量的关键字：

　　　　　　变量：let　　

　　　　　　常量：const

　　　　主要是 =>

　　　　function

　　　　　　案例：

　　　　　　　　// a b 形参：代表形参  =>  {  }  代表语句执行；

　　　　　　　　var f=(a,b) => {

　　　　　　　　　　console.log(a+b);

　　　　　　　　}

　　　　　　　　f(1,2)

　　　　class 

　　　　　　案例：

　　　　　　　　class a{

　　　　　　　　　　a="hello";　　    //属性的定义

　　　　　　　　　　fn(a,b){　　　　 //方法的定义

　　　　　　　　　　　　setTimeout(()=>{

　　　　　　　　　　　　　　console.log(this);

　　　　　　　　　　　　},1000)

　　　　　　　　　　}

　　　　　　　　}

　　　　　　　　var b=new a()　　// b 代表实例对象，一定要用 new 他的构造器；

　　　　　　　　b.fn(1,2)　　　　　 方法的调用

标签：scss,es6,关键字,用法,width,p2r,div,100
来源： https://www.cnblogs.com/shangjun6/p/11068014.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。