今天完成的事：

学习sass重写任务4.

一.下载安装ruby，

二.webstorm配置sass.

三.学习sass的一些基本语法：

1.区分全局变量和局部变量：全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量；

2.局部变量值后加上 !global 关键词可以使得局部变量变成全局变量；

3.变量嵌套引用：即字符串插值，需要使用 #{} 来进行包裹；

4.Mixin的定义及调用：（已在实际任务中运用）

Mixin有点像C语言的宏（macro），是可以重用的代码块。

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

@mixin sssd 

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

@include sssd;

（3）@import命令，用来插入外部文件。

@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令。

@import "foo.css";3

5.Sass嵌套

在Sass中，共有3种嵌套方式：

（1）选择器嵌套；选择器嵌套，是Sass中最常见的嵌套方式，这个类似于HTML元素的嵌套。    选择器嵌套这种方式虽然操作起来很方便，但是却有一个很大的弊端：嵌套的层级越深，编译出来的CSS代码的选择器层级也越深。这种嵌套方式会导致CSS样式冗余，并且难以维护。           在定义选择器的时候，我们要尽量让选择器的层级少一些，最好不要超过3层

（2）属性嵌套；CSS有些属性的前缀是相同的，例如：

                   （1）border-top、border-right、border-bottom、border-left这4个属性拥有相同的前缀“border”； 

                  （2）margin-top、margin-right、margin-bottom、margin-left这4个属性拥有相同的前缀“margin”；

                   （3）font-family、font-size、font-weight、font-variant等属性拥有相同的前缀“font”；

                   对于这些拥有相同前缀的属性，我们可以使用属性嵌套的方式来简化操作。对于属性嵌套，我们要特别注意一点：在需要嵌套的属性前缀后面一定                       要加英文冒号“:”，不然编译出来的就不是我们想要的效果。

（3）伪类嵌套；伪类嵌套（或伪元素嵌套）跟属性嵌套很像，只不过它是需要借助“&”符号一起配合使用。

伪元素跟伪类是不一样的，常见的伪元素只有4个，即::before、::after、::first-letter、::first-line

伪类嵌套都是结合“&”符号来实现的，编译的时候“&”会替换成相应的选择器。

伪元素嵌套同样也是结合“&”符号来实现的，编译的时候“&”会替换成相应的选择器。上面这个是清除浮动最常用的方法，

明天计划的事：完成任务12，开始任务13

遇到的问题:在学习sass过程中，虽然理论上的知识可以看明白，但是在实际任务中不知道该怎么运用scss来编译css文件，后来经过师姐讲解后茅塞顿开，原来那么简单，感觉浪费了一整天时间，罪恶感满满。。。

收获：学会了一些sass中的基本语法知识，学会了在任务中运用，完成了任务11.