LESS extend() not working

Question

I want to write a class 'selected' for my app's buttons. When a button hasClass 'selected' its look and feel should be the same as Bootstrap's 'btn-primary'.

Bootstrap css defines (for example):

.btn-primary { background-color:#00F; color:#FFF; }

I wrote my class as follows:

button.selected:extend(.btn-primary) {};

1) Is it supposed to work like that?

2) If 1) is yes, then my css is not working. The selected class does not inherit color and background-color from btn-primary.

UPDATE

Some of my markup:

<div class="filters">
        <div class="btn-group btn-group-lg type">
            <button type="button" class="btn selected" data-filter="all">
                <span class="glyphicon glyphicon-list-alt"></span>
                All
            </button>
            <button type="button" class="btn btn-default" data-filter="positive">
                <span class="glyphicon glyphicon-thumbs-up"></span>
                In
            </button>
            <button type="button" class="btn btn-default" data-filter="negative">
                <span class="glyphicon glyphicon-thumbs-down"></span>
                Out
            </button>
        </div>
    </div>

And my LESS:

.filters {
            .type {
                button.selected:extend(.btn-primary) {};
            }
        }

My main less file:

@import '../bower_components/bootstrap/dist/css/bootstrap.min.css';

@import "utils.less";
@import "flex.less";
@import "index.less";
@import "transactions.less";

Obviously, if I give the button the class .btn-primary in markup... it simply works.

Yes, it should work and compile successfully. Can you create a sample demo to see where you are going wrong? CodePen, CSSDeck etc would allow you to create a demo with Less code. — Harry
I don't think that you can extend from the CSS file. You should probably try to import the bootstrap.less file from the less folder. Note with v1.5.0 of Less, you could also use the (reference) directive to avoid getting all bootstrap classes in your resultant file. — Harry
I imported bootstrap.less and it worked. Sorry and thank you very much! Add it as answer — Fabio B.
Actually just now managed to find out that you can extend .css files but that should be done with the (less) directive in the import statement. I will add both in the answer. — Harry

Harry Harry · Accepted Answer · 2014-09-22T11:06:17

When we simply import a CSS file with the .css extension it will be treated as CSS and the @import statement left as-is.

For the extend feature to work, Less compiler has to interpret the imported file as a Less file. This can be done in two ways and they are as follows:

Option 1: (Using the (reference) directive)

Using the (reference) directive, allows for pulling in only the targeted/referenced styles from the external bootstrap library. Hence, it would result in a smaller file and is preferred when you are going to reference only few styles from a large library (like bootstrap). Note that this directive was introduced only with Less v1.5.0 and hence will not work in lower compiler versions.

@import (reference) 'less/bootstrap.less';

.filters {
    .type {
        button.selected:extend(.btn-success) {};
    }
}

Option 2: (Using the (less) directive)

When the (less) directive is used, the Less compiler would treat the code present within the imported file as Less code (irrespective of the file extension) and hence would allow extending any rule-sets/classes specified within it. However, the drawback of using this directive is that the entire contents of the .css file (including classes that you may not require in the output file) will be copied to the output. This was introduced in Less v1.4.0.

@import (less) 'bootstrap.css';

.filters {
    .type {
        button.selected:extend(.btn-success) {};
    }
}

LESS extend() not working

1 Answers