今天完成的事情：

修改了任务10的导航栏为响应式，细节修复。

开始任务十一：less，sass了解二者的区别并选择其中一个学习，然后完成任务11，

首先：为什么要用less和sass

Sass和Less都属于CSS预处理器，CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。

通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。

作为前端开发人员，大家都知道，Js中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。

       CSS有具体以下几个缺点：

• 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

       这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。

       但是，CSS预处理器也不是万金油，CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。

       所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦

二者的区别：

关于less：

引入：<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>

vscode扩展商店下载一个eazy less 就可以直接用了。

LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。

现值的复用LESS 中的变量和其他编程语言一样，可以实，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。

若@width：20px，设定

div{  @width：30px;   width：@width，则数值取30px，取局部定义}

div{   width：@width   此处取20px，上级定义     }

其余部分粗略了解。

看了阮一峰的文章决定选择sass进行详细学习。

关于sass：

依赖于ruby环境，需要先下载一个ruby。

使用vscode直接下载一个扩展插件Easy sass就可以直接使用了。

以下来自： 阮一峰网络日志    http://www.ruanyifeng.com/blog/2012/06/sass.html    

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

SASS允许使用变量，所有变量以$开头

SASS提供四个编译风格的选项：

　　* nested：嵌套缩进的css代码，它是默认值。

　　* expanded：没有缩进的、扩展的css代码。

　　* compact：简洁格式的css代码。

　　* compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;

　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

SASS允许在代码中使用算式

SASS允许选择器嵌套。

属性也可以嵌套，比如border-color属性，可以写成：

p {

　border: {
　　　　　　color: red;
　　　　}
　　}

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

　　a {
　　　　&:hover { color: #ffb3ff; }
　　}

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

SASS允许一个选择器，继承另一个选择器。

比如，现有class1：

　　.class1 {
　　　　border: 1px solid #ddd;
　　}

class2要继承class1，就要使用@extend命令：

　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

使用@mixin命令，定义一个代码块。

　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

使用@include命令，调用这个mixin。

　　div {
　　　　@include left;
　　}

mixin的强大之处，在于可以指定参数和缺省值。

　　@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}

使用的时候，根据需要加入参数

div {
　　　　@include left(20px);
　　}

明天计划的事情：

任务12开始。

遇到的问题和收获：

在使用sass的時候，保存遇到一个问题

和之前遇到的问题差不多，又是权重的问题，设定要写在引用的前面，不然引用不到样式会报错。

在使用sass写任务11的时候，没那么熟悉之外没其他大问题。

使用嵌套确实很舒服，省去了很多定义，设定好各项属性直接引用来写代码的感觉非常棒。

比起平时的效率高不少，层级直接对照html写的层级来就好了。