今天完成的事情：

学习了css预处理器，完成task11。

1，css预处理器：

sass，less，stylus。

三种语法sass最严格，less其次，stylus最宽松，样式最多。

2，介绍

sass最古老，在国外最流行。早器的sass支持缩进写法，新版本sass只支持css原生写法，扩展名为.scss，因此新版有时也称scss，现在所说的sass一般指新版sass，新版更严谨，bootstrap4由sass编写。

less其次，语法和sass最相似，在国内最流行，代码比sass略微简洁，安装和使用方法最简单，但不支持function，可扩展性低。

stylus最新，可以不加符号使用缩进写法，扩展性与scss相当，但由于规定过少，可能容易让人混乱。

由上，推荐学习sass。

3，sass安装与使用：

sass由ruby编写，使用前需安装ruby，然后由在ruby的命令提示符中输入gem install sass即安装完成。

sass的使用需先转译。先创建.scss文件，若在c盘根目录创建了a.scss,则需在ruby的命令提示符中输入c:> $ sass a.scss a.css,然后在目录下会生成a.css，此css文件可link引用到html中。

webstorm可自动监听sass等预处理器的变化，实时编译，具体配置请参考http://www.jianshu.com/p/537cea1dc3f8

4，sass的语法

a,嵌套。

div {
  　　　　hi {
    　　　　　　color:red;
    　　　　}
  　　}

b,变量，用$表示。

$blue : #1875e7;　
  div {
  　　　color : $blue;
　　}

c,@mixin定义代码块命令与@include引用代码块命令。

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

  div{
  　　　　@include left;
  　　}

d,@extend继承命令。

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

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

等于

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

　　.class2 {
  　　　　border: 1px solid #ddd;
  　　　　font-size:120%;
  　　}

e,插入文件。

@import "path/a.scss";

@import "path/b.css";

f,颜色函数。

　 lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

g,计算。

　body {
  　　　　margin: (14px/2);
  　　　　top: 50px + 100px;
  　　　　right: $var * 10%;
  　　}

h,条件语句，循环语句，自定义函数等高级语法。

明天计划的任务：

完成task12，重写之前的任务，继续熟悉sass。

遇到的问题：

使用sass的嵌套功能，嵌套层级过多，水平方向不如css整洁，不太适应，不容易找到标签。

收获：

如上。