今天完成的事情

• # 查阅相关资料,认识了CSS预处理器的概念与产生背景;
• # 对比了less与sass的不同之处,选择了sass进行集中学习;
• # 使用sass重构了任务四的css样式表

明天计划的事情

• # 进行任务12,深入了解sass的功能;

遇到的问题

• # sass编译过程中发生的一些问题:
• 在了解了sass编译的常用方法之后,我首先选择通过sublime插件:SASS-Build进行编译,但是遇到了编码兼容性错误;sublime报错如下:
• 
• 
  
• 搜索未果之后,采取了通过命令行来进行编译,同样遇到了报错;报错内容如下:
• 
• 
  
• 很显然,出现问题的矛头直指编码格式,其中命令行的报错信息提到了 on line 6 of task04.scss,
• 所以css文本的第六行到底是个什么鬼?恰好命令行报错后依旧生成了文件,包含了报错信息.
• 
• 第六行是一个注释,这一行包含了中文,差不多就是这行中文要背锅了;在网上查阅相关资料果然印证了我的猜想;其中比较简单的解决方法就是在scss文件第一行写入:@charset "utf-8"
• 
• 在这里要感谢命令行,sublime插件以及自动化编译固然带来了便利性,但功能性上依旧是最原始的命令行工具最强大;
• 
  
• 
  
• 
  

• 
  

收获

一:预处理器（preprocessor）:

预处理器是在真正的编译开始之前由编译器调用的独立程序。预处理器可以删除注释、包含其他文件以及执行宏（宏macro是一段重复文字的简短描写）替代。预处理器可由语言（如C，PHP）要求或以后作为提供额外功能（诸如为FORTRAN提供Ratfor预处理器）的附加软件。

二:CSS 预处理器是什么？

背景:

CSS 自诞生以来，基本语法和核心机制一直没有本质上的变化，它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如今网站的复杂度已经不可同日而语，原生 CSS 已经让开发者力不从心。

当一门语言的能力不足而用户的运行环境又不支持其它选择的时候，这门语言就会沦为 “编译目标” 语言。开发者将选择另一门更高级的语言来进行开发，然后编译到底层语言以便实际运行。

于是，在前端领域，天降大任于斯人也，CSS 预处理器应运而生。而 CSS 这门古老的语言以另一种方式 “重新适应” 了网页开发的需求。

三:sass与less的区别:

 四:# 变量: 

## 使用场景:你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。在sass中是通过$符号来标识变量的. 

## 变量声明:任何可以用作css属性值的赋值都 可以用作sass的变量值;变量声明即赋予变量名具体的属性值;

##变量引用:就像css规则集当中属性值的用法一样,你可以使用对应的变量来替换对应的值;

体会:以数学中"b=x+1"类比,"b"是未知数,也就是变量名;"="可以理解为声明,告诉我们两边相等;"x+1"就相当于css中具体的属性值了,即sass中的变量值,咋一看不就是代数嘛,可是这个变量中的"变"又该如何理解呢?在css中有很多需要重复书写的属性值,引用变量之后,通过修改一个变量值,就可以控制多个css属性值.修改起来非常方便.

  五:   #混合器

##  使用场景: 当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用,从这一点上混合器可以理解为变量的一种扩充;混合器使用@mixin标识符定义

通过"@mixin"定义选择器"btn-style"的样式

通过"@include"引用选择器"btn-style"的样式;

六:#继承器:

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现

使用场景:bodyone与bodytwo样式是一样的,属性值是完全重复,故可以使用继承器

通过语法@extend使bodytwo来继承bodyone的样式;

七:静默注释:

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。

例如我在scss文件中采用的均为 " // 静默注释" ,在编译后的css文件中查看都静默了

总结

• • task11 :
  • 成果链接: http://www.yanzehao.top/task04/
  • 
    
  • 任务脑图 :
  • 
  • 
  • 任务耗时:1day;
  • 此任务接触到了许多全新的概念,如预处理器和编译,总之是能提高我们工作效率的强大的工具,很期待深入了解他