当前位置: 首页 > 工具软件 > Less.js > 使用案例 >

前端 less 使用 &

周朗
2023-12-01
在这里插入代码片
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;
      }
 类似资料: