LESS problems with implicit declared css class

Question

We have the following declarations in styles.less:

.table tbody > tr > td {
    &.colnum, &.colnumdec {
            > input[type=text], > input[type=number] {
                text-align: center;
            }
        }
    }

.inputquantity {
    .colnumdec;
    width: 50px;
}

.inputprize {
    .colnumdec;
    width: 70px;
}

The problem is that LESS complains at inputprize { .colnumdec; with undeclared mixin.

We tried to solving it by adding a explicit declarations of those clases:

.colnum, .colnumdec {
}

But having no properties makes the LESS compiler to omit them, if we instead put one irrelevant property it works fine:

.colnum, .colnumdec {
    border:inherit;
}

Whats the correct way of solving this?

just omit the .colnumdec; in .inputprize? :-D

Christoph
– Christoph

2013-12-10 13:26:35 +00:00
Commented Dec 10, 2013 at 13:26 — Christoph
– Christoph, Commented Dec 10, 2013 at 13:26

seven-phases-max · Accepted Answer · 2014-02-03 19:31:38Z

5

The problem is that LESS complains at .inputprize { .colnumdec; with undeclared mixin.

This is expected since .colnumdec is not in the global scope (and .inputprize has no access to the .table tbody > tr > td scope where the .colnumdec is defined).

The correct syntax to "call" .colnumdec within .inputprize would be something like .table tbody > tr > td.colnumdec; however LESS does not allow using non-class or non-id selectors (i.e. non-. and non-# like body) as mixins or namespaces.

Solution #1:

The usual way to handle this kind of stuff is to move the shared code into a dedicated mixin, e.g.:

.colnum() {
    > input[type=text], > input[type=number] {
        text-align: center;
    }
}

.table tbody > tr > td {
    &.colnum, &.colnumdec {
        .colnum();
    }
}

.inputquantity {
    .colnum(); // parens are optional here
    width: 50px;
}

.inputprize {
    .colnum();
    width: 70px;
}

Solution #2:

#1 produces quite bloated CSS output, so more optimised way recently getting more popular is to use the "Extend" feature, e.g.:

.table tbody > tr > td {
    &.colnum, &.colnumdec {
        > input[type=text], > input[type=number] {
            text-align: center;
        }
    }
}

.colnum() {
    &:extend(.table tbody > tr > td.colnumdec all);
}

.inputquantity {
    .colnum(); // parens are optional here
    width: 50px;
}

.inputprize {
    .colnum();
    width: 70px;
}

The other important benefit of this extend-based solution is that it's not intrusive, i.e. you don't need to modify .table tbody > tr > td content.

edited Feb 3, 2014 at 19:31

answered Dec 10, 2013 at 13:08

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VSP Over a year ago

It seems factible, but could be possible to make .colnum and .colnumdec usable directly instead of .colnum() (we use this definitions for subtemplates too and prefer make it easy for the other developers)

seven-phases-max Over a year ago

Parens on calling a mixin with 0 parameters are optional so for other developers both #1 and #2 may look exactly like it was intended to be with your initial example (Though personally I would prefer to distinguish between "real selector" and "sub-template" (aka mixin) expansions by seeing those parens).

Collectives™ on Stack Overflow

LESS problems with implicit declared css class

1 Answer 1

Solution #1:

Solution #2:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution #1:

Solution #2:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related