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

试试看？

但是，这是有效的。

澄清我已经通过将以下内容放在我的一个较少文件的末尾来进行测试：

        .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，但我认为它应该成为所有事物的颂歌。

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

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

1 个答案: