css - LESS.css 嵌套规则 - 这是有效的 LESS 吗？

Question

我想在 LESS 中更轻松地管理我的字体规则，因此我根据官方 LESS 指南中的嵌套规则部分创建了以下规则。

但是，它们只提供包含附加类的嵌套规则的示例，所以我想知道以这种方式编写它是否有效，如果无效，是否有一种方法可以使我的代码简洁并利用嵌套规则？

我希望能够使用嵌套规则功能为 .logo 类指定 h1 和 h3 的参数。

//Fonts
.font-setup (@fontfamily, @fontsize, @fontweight, @fontcolor){
    font-family: @fontfamily;
    font-size: @fontsize;
    font-weight: @fontweight;
    color: @fontcolor;
}

.logo {
    h1 {.font-setup ("Euphemia UCAS", 200px, normal, #222);}
    h3 {.font-setup ("Euphemia UCAS", 40px, normal, #222);}

    text-shadow: 0px 2px 3px #555;
}

注意:我应该指出，我是在 Bootstrap.less 之上构建的，所以我的类正在覆盖它们的 css。正如我所说，当我在不使用嵌套规则的情况下以更少的方式输出时，我没有遇到任何问题

Answer 1

试试看？

但是，是的，这是有效的。

为了澄清，我已经通过将以下内容放在我的 less 文件之一的末尾进行了测试:

        .font-setup (@fontfamily, @fontsize, @fontweight, @fontcolor){
        font-family: @fontfamily;
        font-size: @fontsize;
        font-weight: @fontweight;
        color: @fontcolor;
        }

.logo {
    h1 {.font-setup ("Euphemia UCAS", 200px, normal, #222);}
    h3 {.font-setup ("Euphemia UCAS", 40px, normal, #222);}

    text-shadow: 0px 2px 3px #555;
}

这在我的 CSS 末尾呈现了以下内容:

.logo {
  text-shadow: 0px 2px 3px #555;
}
.logo h1 {
  font-family: "Euphemia UCAS";
  font-size: 200px;
  font-weight: normal;
  color: #222222;
}
.logo h3 {
  font-family: "Euphemia UCAS";
  font-size: 40px;
  font-weight: normal;
  color: #222222;
}

这是使用 DotLess，但我想它应该是所有东西的 saem。

我认为您需要验证文件的其他部分...