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.

Answer 1

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) {};
    }
}