less嵌套规则

Posted 2020-11-11 keep

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了less嵌套规则相关的知识，希望对你有一定的参考价值。

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嵌套规则的主要内容，如果未能解决你的问题，请参考以下文章