day27 - Sass

首先简单介绍下DOS
DOS：磁盘操作系统(通过DOS命令操作磁盘文件或者文件夹(目录))

操作	命令
DOS进入	win+r → cmd
显示目录下面的文件或者目录	dir
进入对应的盘符	D: E: F:
进入对应的目录	cd 目录地址(可以通过tab键补全目录名称或者文件名称)
返回上一层目录	cd…
创建目录(md)	mkdir 目录名称
删除目录	rd 目录名称
删除文件	del 文件名
创建文件	cd>文件名
清屏	cls

sass简介：

• css编写时权重难以控制，嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。
• sass是世界上最好的css扩展语言。在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数（如颜色加深，颜色淡化）用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。
• sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。

sass的扩展名:

1. .sass(基于ruby语法，没有{}和分号)   
2. .scss(正常的css代码)

sass编译css的命令：

实时监听编译：
sass --watch sass/.:css/. --style expanded

• sass     sass命令
• - -watch   监听目录 取消监听：ctrl+c
• sass/.    sass目录下面的所有文件 /.代表文件夹下的所有文件
• css/. 生成的css目录
• - -style expanded 生成的css的格式(有4中，expanded是常用的)
  • (1)- -style nested 嵌套（默认）
  • (2)- -style compact 紧凑 每个选择器代码在一行
  • (3)- -style expanded 扩展(完全格式化标准)
  • (4)- -style compressed 全部压缩成一行

混合器：

定义混合器：

@mixin 混合器名称（$path:"img/1.jpg",$color:blue,$repeat:no-repeat){
    background:url($path) $color $repeat;
}

使用混合器：

@include 混合器名称("img/1.jpg",red,no-repeat);

继承：

.box1{
    width: 100px;
    height: 100px;
}
.box2{
    @extend .box1; /*.box2继承.box1的属性*/
    border:1px solid #000;
}

引入：

       在一个文件中定义变量和混合器，在写css的时候文件比较混乱，所以通常会将变量和混合器放在单独的文件中，通过命令导入进来，这样每个文件中的代码都是同一类。

//仅需要引入文件名称。无需添加下杠和扩展名
taobao.scss
@import "top";

scss文件：_top.scss
.top {
	content: '这里是top的css代码';
}

css文件：taobao.css
.top {
	content: '这里是top的css代码';
}