Question

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.

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.

//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. As i say, when i outputted this in less without using nested rules i had no problems

Answer 1

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:

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

I think you need to verify other parts of your file…