0

我想让在 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。正如我所说，当我在不使用嵌套规则的情况下输出这个时，我没有问题

4

1 回答 1

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，但我想它应该是一切的标准。

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

于 2012-07-24T11:01:43.800 回答