scss 用法 及 es6 用法讲解

  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)      方法的调用

上一篇:sass scss less 的编译工具 koala


下一篇:31Linux - 用户/权限管理(退出登录账户: exit)