今天完成的事情：

学习sass

明天计划的事情：

继续学习sass，开始任务11的代码

遇到的问题：

暂无

收获：

一、Sass中编译出来的样式风格可以按不同的样式风格显示。其主要包括以下几种样式风格：

嵌套输出方式 nested

在编译的时候尾端带上参数“ --style nested”

展开输出方式 expanded  

在编译的时候带上参数“ --style expanded”

这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行

紧凑输出方式 compact 

在编译的时候带上参数“ --style compact”

（只有新选择器重启一行）

压缩输出方式 compressed

在编译的时候带上参数“ --style compressed”

压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格

（不换行）

二、Sass 的变量包括三个部分：

1声明变量的符号“$”

2变量名称

3赋予变量的值

示例：$width:200px;

定义之后可以在全局范围内使用

width:$width;

编译后的css代码：

width:200px;

sass 的默认变量仅需要在值后面加上 !default 即可

三、全局变量和局部变量

全局变量就是定义在元素外面的变量

定义在元素内部的变量，是一个局部变量，在元素内部定义的变量不会影响其他元素

只有满足所有下述标准时方可创建新变量：

该值至少重复出现了两次；

该值至少可能会被更新一次；

该值所有的表现都与变量有关（非巧合）。

四、混合宏

‍‍需要重复使用大段的样式时，单独使用变量难以达到目的，这时候可以使用混合宏‍

声明混合宏用关键字（xxx是自定义混合宏的名字）：

@mixin xxx{ ……}

这样大括号内的样式就可以被整体重复调用

调用混合宏：

select {

    @include xxx；

}

在混合宏中，可以传一个不带任何值的参数

@mixin border-radius($radius){

  -webkit-border-radius: $radius;

  border-radius: $radius;

}

在调用的时候可以给这个混合宏传一个参数值：

.box {

  @include border-radius(3px);

}

编译出来的 CSS:

.box {

  -webkit-border-radius: 3px;

  border-radius: 3px;

}

还可以给混合宏的参数传一个默认值，不用默认值时可以再传一个随机需要的参数值

Sass 混合宏除了能传一个参数之外，还可以传多个参数