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

【问题标题】：LESS.css Nested Rules - is this valid LESS?LESS.css 嵌套规则 - 这是有效的 LESS 吗？
【发布时间】：2012-07-24 20:50:59
【问题描述】：

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

【问题讨论】：

.font-setup() 扩展为什么？
我不得不删除 StackOverflow 上的“@”符号，因为它不允许我粘贴它，但它们在我的原始代码中 //Fonts .font-setup (fontfamily, fontsize, fontweight , 字体颜色）{ 字体系列：字体系列；字体大小：字体大小；字体粗细：字体粗细；颜色：字体颜色； }
请将其作为编辑而非评论放入您的问题中，包括@。
好的，我已经做到了。提前谢谢你。

标签： css less

【解决方案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。

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

【讨论】：

我在尝试后发布了这个问题，但它不起作用，即使之前我输出了相同的 css 而没有嵌套规则。我还在 tinkerbin 中检查过它，它确实似乎有效，但我的页面现在已损坏并且未应用字体大小。有什么建议吗？
您的.font-setup 是否正确定义并接收正确的参数？如果你用更“正常”的东西替换这些元素是否有效（例如，只需在其中粘贴 display: block; 以检查一般语法）。
是的，似乎是。我应该指出，我是在 Bootstrap.less 之上构建的，所以我的课程覆盖了他们的 css。正如我所说，当我在不使用嵌套规则的情况下输出这个时，我没有任何问题。我应该发布一个指向我的代码托管位置的链接吗？
刚刚编辑了我的帖子，澄清了为什么我说它应该有效。如果您完全取出这些线，它是否可以正常工作？除了这个规则集的嵌套之外，您确定没有进行任何更改吗？
我确实得到了相同的输出。我已经意识到以前我只使用它自己的徽标类来应用于所有标签。并有一个通用类来覆盖 bootstrap.less。公平地说，我现在使用的是类，然后是标签类型，例如.logo h1，它似乎从原始引导程序继承了 h1 的 css。有没有办法覆盖原始引导程序的 h1 ？我知道我可以修改原始的 bootstrap.less 代码，但如果它不影响性能，我宁愿添加我自己的类，这样当 bootstrap 更新时我不必重写我的代码