Question

给出css嵌套的LESS语法如下

.center {
  h2 {
    text-align : center;
  }
  h3 {
    color:red;
  }
}

使用在线编译器检查时，按预期得到它： -

.center h2 {
  text-align: center;
}
.center h3 {
  color: red;
}

但是因为较少的语法不能像上面给出的那样工作。然而，如果直接在第二个（编译的那个）中提到，那么它可以工作。

这是我使用的html

  <body>
   <div class="center">
    <h2>Welcome Users</h2>
    <h3>Login</h3>
  </body>

这种情况有没有css规则？或者这是一个错误吗？

Answer 1

浏览器不支持LESS。

你刚刚把你的LESS放在一个JSFiddle标记为“CSS”的框中。 JSFiddle然后构建一个网页并告诉浏览器它是CSS。由于它不是CSS，浏览器会遇到语法错误，并且不会按照您期望的方式解析它。

您需要compile it to CSS，然后在页面中包含CSS。

或者（不推荐，因为效率低less reliable）你可以include JavaScript阅读LESS并动态生成CSS。