CODEWITHSUNDEEP
cssless
Ian Campbell
Ian Campbell

Reputation: 2748

How to build a CSS style with a LESS mixin parameter?


Due to CSS specificity issues, I am attempting to build a CSS expression with a LESS mixin as follows:

// overriding any previous styling with a more specific expression:
.styleSpecificListElement(@id: "#index") {
    main .list ul @{id} a {
        // referencing another mixin here:
        .setLiStyling();
    }
}


LESS will parse this, however it is parsed with the inserted parameter in double-quotes, in which does not evaluate as intended:

/* don't want the double-quotes around the id: */
main .list ul "#index" a {
    /* ...code from the .setLiStyling() mixin generated here... */
}

Upvotes: 1

Views: 157

Answers (1)

Ian Campbell
Ian Campbell

Reputation: 2748


Ok nevermind, I just figured it out -- the hash-symbol # can precede the @{id} reference in the mixin, where the parameter is then passed as a String without quotes:

.styleSpecificListElement(@id: index) {
    main .list ul #@{id} a {
        // referencing another mixin here:
        .setLiStyling();
    }
}


...where calling .styleSpecificListElement(foobar) will then parse into CSS as:

main .list ul #foobar a {
    /* ...code from the .setLiStyling() mixin generated here... */
}

Upvotes: 3

Related Questions