简体   繁体   English

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

[英]LESS.css Nested Rules - is this valid LESS?

I wanted to make it easier to manage my font rules in LESS, so i created the following rule based on the Nested Rules section in the official LESS guide. 我想简化在LESS中管理字体规则的过程,因此我根据LESS官方指南中的“嵌套规则”部分创建了以下规则。

However, they only provide example for nested rules that contain additional classes, so i wanted to know if writing it this way is valid or not, and if not, is there a way i can make my code succinct and take advantage of nested rules? 但是,它们仅提供了包含其他类的嵌套规则的示例,因此我想知道以这种方式编写的代码是否有效,如果无效,是否可以使我的代码简洁并利用嵌套规则?

I'd like to be able to use the nested rule feature to specify parameters for h1 and h3 for the .logo class. 我希望能够使用嵌套规则功能为.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;
}

Note: I should point out that i'm building ontop of Bootstrap.less, so my classes are overriding their css. 注意:我应该指出,我在Bootstrap.less之上构建,因此我的类覆盖了它们的CSS。 As i say, when i outputted this in less without using nested rules i had no problems 如我所说,当我不使用嵌套规则而以更少的输出时,我就没有问题

Try it and see? 试试看吧?

But yes, this is valid. 但是是的,这是有效的。

To clarify I have tested by putting the following at the end of one of my less files: 为了澄清起见,我将以下文件放在一个较少的文件末尾进行了测试:

        .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;
}

This has rendered out the following at the end of my CSS: 这在我的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;
}

This is using DotLess but I would imagine it shoudl be the saem for everything. 这是使用DotLess的方法,但我想它应该成为一切的圣地。

I think you need to verify other parts of your file... 我认为您需要验证文件的其他部分...

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM