码迷,mamicode.com
首页 > 其他好文 > 详细

less嵌套规则

时间:2018-06-05 23:21:59      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:focus   hover   使用   TE   code   class   ati   ESS   ext   

Less中嵌套

最有意思的小东西了

两种方法:

     &对伪类使用

         hover或focus

.box {
  width: 200px;
  li {
    list-style: none;
  }
  a {
    text-decoration: none;
  }
}

编译成css

.box {
  width: 200px;
}
.box li {
  list-style: none;
}
.box a {
  text-decoration: none;
}

 

&的使用:

.box {
  width: 200px;
  li {
    list-style: none;
  }
  a {
    text-decoration: none;
    &:hover {
      color: red
    }
  }
}

编译成css

.box {
  width: 200px;
}
.box li {
  list-style: none;
}
.box a {
  text-decoration: none;
}
.box a:hover {
  color: #ff0000;
}

 

less嵌套规则

标签:focus   hover   使用   TE   code   class   ati   ESS   ext   

原文地址:https://www.cnblogs.com/qjuly/p/9142256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!