今天完成的事情：

1.学习了如何使用sass

2.使用sass重写了任务4

3.使用sass重写了任务5、6（成果展示处）

 
明天计划的事情：

继续学习

遇到的问题：

暂无

 
收获：

1.关于Sass

（1）为何会有Sass以及Sass是什么

因为在CSS文件中会存在大量重复性的语句，再加上CSS这种设计语言缺少了一定的逻辑性，所以Sass出现了，Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量、嵌套、混合、导入等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。

（2）Sass与Scss有什么区别

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) ，这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

另一种也是最早的 Sass 语法格式，被称为缩进格式通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，这种格式以 .sass 作为拓展名。

（3）变量

Sass在CSS的基础上增加了变量，而变量的定义方式就是在变量前加一个“$”，变量的值可以是数字、颜色等，也可以是多个值，甚至可以引用其他的变量

Eg

$primary-color : blue;

$primary-border: 1px solid $primary-color

（4）嵌套

Eg                                                 .nav{ 样式}

.nav{                                               .nav ul{样式}padding:0;                                      .nav li  {样式}

.ul{

margin:0;              

}

.li{

color:blue

}

}

可以使得书写过程更加的方便清晰

引用父选择器时使用“&”

Ea{                                                  a：hover{样式}

样式…

&：hover

{样式…}

}

假设父元素为nav，则& &-text表示的就是 .nav .nav-text{}

属性的嵌套

body

{

  font:{

      family:..

      size:…

      weight:…}

}

（5）mixin 混合

格式：@mixin名字（参数1，参数2）{样式}

调用时使用@include

Eg

@mixin alert

{样式}

.alert-text

{@include alert}

此时alert-text就会调用alert中定义好的样式，有点像继承

在mixin中参数可以用于传参

Eg

@mixin box（$gap:12px,$radius:10px）

.section { @include$box(  ,  )}

（6）extend 继承

定义好变量的样式后，在应用到其他上面，用@extend引入

（7）import 导入

CSS中可将其他文件导入，但是每次都会发出一次http请求，所以会导致网页加载的速度变慢，所以在Sass中的import可较好的解决这个问题

每个被导入的文件的文件名的开头必须以下划线开始，每个文件属于这个Sass的部分（partial）

导入时使用@import

Eg @import“base”（此时就不在需要下划线以及后缀名了）

（8）控制语句

If、while、for等

Eg

@for $i from 1 to 10

{.box-#{i}

{样式}

}

2.任务十一总结

要充分的使用Sass就要观察页面有什么相同的地方可以偷懒，如图颜色相同的框既是有大部分相似样式

找好相同的地方之后就可以定义变量，写好相同的样式，然后在具体的类中用继承的方式去应用，不同的地方另外在写就好了。