今天的学习记录——一点点sass和webpack的使用

        今天是这样的，看完视频里的sass，本来想学习vue.js，但是我发现我的资源版本比较低，我写出来的代码一直在报错，改好了之后跟视频相差挺多的。所以说，我觉得看这个可能效率过低，所以我在b站去看了黑马程序员的vue.js的一系列视频，打算看完再去看我的视频，看看自己看到旧版能不能想到新版的语法。前面也用过几次webpack，但是只能读懂，并不懂原理什么的，所以今天学了感觉收获很多，老师讲的很细致，非常nice！下面开始回顾今天的学习了：

一、sass：安装插件 live sass compiler
sass分为两种后缀名文件，scss和sass。区别在于sass不能有花括号和分号，其余语法很相似，保存后会自动生成对应的css文件，类似于自动转义过程
1.变量：可以定义变量 但是变量必须放在上面(执行之前)
例如：$text-color:#333，这样修改的时候只需要改变量，不需要去后面找
$small-font:14px,令font-size:$small-font;那么就是14px，并且定义时可以进行运算
2.一些颜色函数：

lighten($text-color,20%)/*把颜色变浅20%*/
darken($text-color,20%)/*把颜色变深20%*/

嵌套语法：避免重复调用

.header{
  span{
    color:red;
    &:active{
      color: green;
    }
    &:hover{
      color: blue;
    }
  }
}

3.代码拆分和引入：
可以用一个scss储存变量，命名最开始加个_，会默认不编译出css文件 如：_config.scss
引入：@import  'config'; 不需要加下划线，也不用找路径4.mixin混入:
定义

@mixin singleline-ellipsis($width){
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  //还可以接收参数
  width:$width;
}

引入：

.text{
  width:600px;
  @include:singleline-ellipsis;
}

加了参数之后，引入是这样的

.text{
  @include:singleline-ellipsis(600px);
}

@content的作用：当引入mixin时候，花括号内容作为content
媒体查询与mixin混用