今天是这样的,看完视频里的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混用