今天完成的事情：

1.学习了sass的一些基本用法，安装了sass

2.放弃使用sublime，开始使用webstorm并学习了一些webstorm的用法和快捷键

3.在webstorm配置了sass实现自动编译

4.用sass重写了任务4，提交任务11

明天计划的事情：

1.继续适应webstorm的使用

2.写任务11任务总结，进行档案更新

3.开始任务12

遇到的问题：

1.安装sass时需要安装先安装Ruby，在Ruby网站上打不开Ruby下载页面，不知道什么原因，最后找别人要了一个安装包

2.在sublime上安装sass插件后，发现在sass文件上编辑时没有了css属性提示，在网上找了很久也没有找到相应插件，因为习惯使用sublime而且比较喜欢sublime的轻量和美观的界面，不忍弃用，这个问题困扰了一个下午，最后还是决定放弃使用sublime，选择使用功能比较全的webstorm。（这个问题的纠结有点浪费时间了，吸取教训）

3.在webstorm上编辑sass文件需要加中文注释时频繁报错，最后在网上找到解决方法，在 scss 文件头部加上：@charset "utf-8";就解决了

4.做task11的过程中，需要修改表单里placeholder的文字样式，一直没想到办法，最后通过input[type="text"]::placeholder这个选择器成功修改了文字样式，但是还是搞不明白“：”和“：：”的区别。

收获：

1.sass的基本用法

（1）使用变量

任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。

变量以$开头，既可以用于选择器(Selector)，也可以用于属性(Property)和属性值(Value)。 

当用于属性值时，通常可以直接引用；当用于选择器、属性和某些复杂属性值(e.g. font-size/line-height)时，使用 #{$var} 的形式引用。

//简单变量

$bgColor: #fefefe;

$fontSize: 14px;

$lineHeight: 1.5;

html, body {

    font: #{$fontSize}/#{lineHeight} sans-serif;

    background-color: $bgColor;

}

对于多值变量，有List和Map两种形式，分别类似于JS中的数组和对象，使用方式如下：

//多值变量：List形式

$margins: 5px 10px, 15px 20px;

div {

    margin: nth($margins, 1) nth($margins, 2);

    padding: nth($margins, 1);

}

//多值变量：Map形式

$headers: (h1:2em, h2:1.5em, h3:1.2em);

@each $header, $size in $headers {

    #{$header} {

        font-size: $size;

    }

}

（2）使用嵌套

嵌套可以分为选择器嵌套和属性嵌套，使用 & 表示在嵌套中对父元素的引用。

ul {

    border: 1px solid $ul-border-color;

    li {

        border: 1px solid $li-border-color;

        a {

            text-decoration: none;

            &:hover {

                text-decoration: underline;

                font: {

                    size: 1.5em;

                    weight: bold;

                }

            }

        }

    }

}

（3）使用混合（Minxin）

可传递参数，通常与 @include 配合使用，提高代码复用率。

@mixin round($deg) {

    border-radius: $deg;

}

.panel {

    @include round(5px);

}

@mixin link-style($selector) {

    .list1 #{$selector} {

        color: $link-color1;

    }

    .list2 #{$selector} {

        color: $link-color2;

    }

}

@include link-style(".link");

（4）使用继承（Extend）

当某一类元素拥有大量相同属性时，可以通过继承来简化代码，提高代码复用率。

.btn {

    display: inline-block;

    margin: 10px;

    padding: 5px 15px;

}

.btn-bor {

    border: 1px solid #ccc;

}

.btn-red {

    @extend .btn;

    @extend .btn-bor;

    border-color: red;

}

另外，继承可以与占位选择器(%foo)配合使用。

.container div%box {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

.bor-box {

    @extend %box;

}

//编译为：

.container div.bor-box {...}

（5）使用静默注释（Comments）

SASS支持 // 形式的单行注释及 /* */ 形式的多行注释，但是在编译成css文件的时候，单行注释会被丢弃，而多行注释则被保留。

2.webstorm快捷键

alt+F2  可以选择打开的浏览器  上下键移动选择

Ctrl+/ 或 Ctrl+Shift+/    注释（// 或者/*…*/ ）

ctrl+shift+A    快速查找并使用编辑器所有功能（必记）

ctrl+alt+s    打开配置窗口

alt+Insert    新建一个文件或其他

shift+tab/tab    减少/扩大缩进（可以在代码中减少行缩进）

alt+F1    查找代码在其他界面模块的位置，颇为有用

Shift+F6    重构-重命名

Ctrl+X    删除行

Ctrl+D    复制行

Ctrl+G    查找行

Ctrl+Shift+Up/Down    代码向上/下移动。

F2 或Shift+F2    高亮错误或警告快速定位

写代码，按Tab    生成代码

选中文本，按Ctrl+Shift+F7    高亮显示所有该文本，按Esc高亮消失。(因为这个功能我就可以发放心的放弃sublime了)

Ctrl+B或Ctrl+鼠标左键单击    快速打开光标处的类或方法，（NB的功能）

Ctrl + Alt + B     Go to implementation(s) 跳转方法实现处

Ctrl + Shift + I    Open quick definition lookup 打开定义快速查找

Alt + Up/Down     Go to previous/next method 跳转到上一个/下一个方法

Ctrl+E    最近打开的文件

Alt+F1    查找代码所在位置

Ctrl+Alt+L    格式化代码

Ctrl+R    替换文本

Ctrl+F    查找文本

Ctrl+P    方法参数提示

F3    查找下一个

Shift+F3    查找上一个

alt+Shift+F    将当前文件加入收藏夹

ctrl+alt+s    打开配置窗口

ctrl+Shift+N    通过文件名快速查找工程内的文件（必记）

ctrl+Shift+alt+N    通过一个字符快速查找位置（必记）

Shift+enter    重新开始一行（无论光标在哪个位置）

Ctrl + Alt + T     with…（if, else, try, catch, for, etc）用 * 来围绕选中的代码行，（ * 包括 if 、 while 、 try catch 等）

Ctrl + Shift + U    Toggle case for word at caret or selected block 光标所在位置大小写

Ctrl + Delete     Delete to word end 删除文字结束

Ctrl + Backspace     Delete to word start 删除文字开始

Ctrl + E     Recent files popup 弹出最近打开的文件

F11     Toggle bookmark 切换标记，我觉得叫书签更好，就是sublime text 的F2

Ctrl + Shift + F12     Toggle maximizing editor 切换最大化编辑器

Alt + Shift + F     Add to Favorites 添至收藏夹

进度：css任务11

任务开始时间：2018.6.12

预计demo时间：2018.6.12

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/project-task-719.html