前端 less 使用 &

在这里插入代码片
1）& 代表当前层级元素的上一级元素，就是当前层级元素的父元素。


2）给当前元素加一个伪类时候使用，:hover(::hover), :after(::after)
css:用css写法
a{color:red}
a:hover{color:blue};

less:用less写法
a{
    color:red;
    &:hover{
        color:green;
    }
}
---------------------------
css:
.clearfix:after{display:block; content:'';clear:both}
.clearfix{zoom:1};

less:
.clearfix{
    zoom:1;
    &:after{
        display:block;
        content:'';
        clear:both;
    }
}


3）代表的上一层选择器的名字，此例便是header。
/* Less */
      #header{
        &:after{
          content:"Less is more!";
        }
        .title{
          font-weight:bold;
        }
        &_content{//理解方式：直接把 & 替换成 #header
          margin:20px;
        }
      }
      /* 生成的 CSS */
      #header::after{
        content:"Less is more!";
      }
      #header .title{ //嵌套了
        font-weight:bold;
      }
      #header_content{//没有嵌套！
          margin:20px;
      }