今天完成的事情：任务十一

明天计划完成的事情：熟悉less,学会熟练的使用less

遇到的问题：

1.本来以为vscode中直接引用scss,就像这样<link rel="stylesheet" type="text/scss" href="11.scss">,就像这样之类的，后来发现scss会自动编译出css出来，直接引用编译出的css就可以了

2.还有sass中我们常用@extend继承功能，在媒体查询@media screen中是不能用的

3.input常用的placeholder功能，有的时候因为input的尺寸大小，placeholder显示的字体不匹配，其实它里面的字体大小是可以更改的，代码如下

   input::-webkit-input-placeholder{font-size:16px;}注意input后面有两个“：”

学到的知识：

一:预处理器（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文件中查看都静默了

总结