今天完成的事

1.使用混合规则

将一些公用的属性抽取出来作为一个公共类

.display-flex (){
  display: flex;
  position: fixed;
  width: 100%;
}

.header {
  .display-flex;
  top: 0;
  background-color: @NO1-color;
  justify-content: space-between;

.label {
  .display-flex;
  top: 50px;
  flex-flow: column;
  input {

2.使用函数规则根据不同的参数生成不同的样式

使用函数规则优化 top属性

.top(@top) {
  top(@top);
}

.header {
  .display-flex;
  .top(0);
  background-color: @NO1-color;
  justify-content: space-between;

.label {
  .display-flex;
  .top(50px);
  flex-flow: column;

3.根据less中的父子规则写法 

使用&代替主类

.label::after,.label::before {
       content: "";
    display: block;
    position: absolute;
    background: rgb(234,237,238);
    height: 40px;
    width: 2px;
    left: 50px;
  &::after {
    .top(17px);
  }
  &::before {
    .top(79px);
  }
}

4.

明天计划的事

1.提交任务11并完善不足 

2.开始任务12

3.

遇到的问题

今天的收获

1.学习less的混合规则

css中有很多重复的相同属性

可以将这些重复的属性抽出来合并在一个公共类中 

并且在需要的时候直接在其他类中引用这些公共类

使用混合规则能有效减少的css的代码量 并且在HTML中一个元素不需要重复引用很多CSS类 

2.学习less的函数 

在函数中输入不同的参数来生成不同的代码

如图例所示 

使用了一个有关top的函数

在header类中输入参数值为0 

那么得到一个属性值为

top: 0;

而输入其他值比如50px 那么得到的属性为

top: 50px;

1)当属性中有多个值时，在函数括号中用分号隔开

// 函数有多个参数时用分号隔开.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;}

3.学习了less的父子类的写法

.container {
  padding: 0;
  .article {
    background-color: red;
  }
}

4.学习了@import如何使用以及原理

@import可以像JS那样在一个less文件中模块化引入另一个less文件

等同于复制另一个less文件的内容