今天完成的事情：

1. 学习less基础知识；

2.配置sublime text3 支持less语法高亮，自动编译less，格式化压缩css文档；

3.完成任务11

明天计划的事情：

1.完成任务12；

2.了解json格式

遇到的问题：

<header>设置属性为：position：fixed；未指定位置

position：fixed；height width指定

header 的位置随着下面form的margin值发生变化，

form设置为

则，header的位置会下移70px，

设置top：0；后位置正常，这个是什么原因？

收获：

less基础知识：

1.CDN

//官网推荐：

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

2.注释

less里面有两种注释

/*这是会被编译的注释，编译后的注释会出现在css文档中*/

//这是不会被编译的注释，注释不会出现在编译后的css文档中，用来注释less

3.变量

less声明变量使用@

@test_width:300px;

//声明变量

.box{

  width:@test_width;

}

//使用变量

4.混合

less可以定义函数，函数可以含参

.radius{

  @radius:soild #000 1px;

}

//使用

.box {

  width: 200px;

  height: 200px;

  .radius;

}

//可以含参

.border(@radius:1px){ //也可以不指定值(@radius)

  border: solid #f0f @radius;

}

//use

.box2 {

  width: @width;

  .border();  //不含参的这样写: .border(10px);

}

5.匹配模式

预先写好几个带参函数，参数固定（参数为关键字）使用时直接在调用中加入参数即可调用相应的函数

.position(a){

  poition: absolute;

}

.position(r){

  position: relative;

}

.position(f){

  position: fixed;

}

//下面是匹配

.box{

  width: 200px;

  height: 300px;

  .position(f);

}

//多个参数使用@_来匹配

.triangle(@_, @width:20px, @height:30px){

  //这里有一些语句

}

.box2{

  .triangle(top);//也可以加上其他呀改变的值

}

6.运算

这个简单

@width:200px;

.box{

  width: @width-20; //单位可以不带，因为前面变量已经指明了单位

}

7.嵌套规则

//假如我们现在有这么一个结构

<ul>

  <li>

    <a>

      <span></span>

    </a>

  </li>

</ul>

//之前我们的定义可能是这样的

ul {}

ul li {}

ul li a {}

ul li a span {}

//层层嵌套会导致浏览器的刷新频率增加，一般不要这样写

//now we could do like this

ul{

  li{}

  a{

    &:hover{} //&表示上一层选择器

  }

  span{}

}

//层层嵌套会导致浏览器的刷新频率增加，所以写在ul下面就好

8.@arguments变量

@arguments是一个偷懒的做法，批量使用设定变量

.border_arg(@w:20px, @cc:#fff, @xx:solid){

  border:@arguments; //引用上面所有变量

}

.test_arguments{

  border_arg(30px);  //30px #fff solid

}

避免编译

//在不需要编译的语句前面加上 ~'你的内容' 或者 ~"你的内容"

.test{

  width:~'calc(100px - 20px)';

}

//在css中编译为

.test{

  width:cala(100px - 20px);

}

# important

.radius{

  @radius:2px;

}

//text

.test_improtant{

  .radius() imprtant;

}

//css style

.test_important{

  radius:2px !important;

}