今天完成的事情:

  昨天下载好了SASS编译程序，今天用它来完善任务十二，优化我的类名，重构任务中，任务十二已经完成大半，但总是感觉不是很完美，总感觉还有更加优化的方式方法我没有发现，在定位和布局中或许还有更加方便的方法。

    明天计划的事情：

    明天彻底优化任务十二，并且提交，开始任务十三的重构任务。

     遇到的问题：

              在用SASS来优化重构任务十二的时候，由于对SASS的理解不够和使用方法不熟练，总感觉不是很顺手，在最后百度了一些资料，最后总结了一下，SASS的具体用法：

他可以显示.scss文件转化的css代码，比如： sass test.scss

也可以将显示结果保存成CSS文件，后面再跟一个.css文件名 sass test.scss test.css

大概有四个编译风格的选项

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

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

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

　　 * compressed：压缩后的css代码。

也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

    // watch a file

    sass --watch input.scss:output.css

    // watch a directory

    sass --watch app/sass:public/stylesheets

在昨天的日报中提到过SASS变量的事情，但是SASS允许使用变量，但是所有变量以$开头。比如：

$blue : #1875e7;　

div {color : $blue;}

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

    示例：

        $side : left;

.rounded {

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

}

SASS允许也选择器嵌套，我觉得这是使用SASS最便捷的地方，因为在嵌套的时候，SASS会自动帮你优化。

div h1 {

　　color : red;

}

        也可以写成：

div {

　　h1 {

　　　　color:red;

　　}

}

属性也可以嵌套，可以写成：

p {

　　border: {

　　　　color: red;

　　}

}  

这种使用方法，贼方便。

在嵌套的代码块内，可以引用父元素。比如a:hover的委内效果。可以写成：

a {

　　&:hover { color: #ffb3ff; }

}

SASS共有两种注释风格。

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

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

 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明具体信息。这样会非常利于到时候去找寻代码。

    在SASS里面我还有一些没有搞懂的地方，比如说代码的重用。

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

    .class1 {

        border: 1px solid #ddd;

    }

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

    .class2 {

@extend .class1;

font-size:120%;

    }

这个部分我看了很久，但是实际操作遇到了一些问题，准备明天好好研究一下。 

收获：

    在重构任务中，发现了基础代码更加灵活的使用方法，对布局和定位有了新的理解，基础掌握SASS的使用方法。