CODEWITHSUNDEEP
cssless
Vadorequest
Vadorequest

Reputation: 17999

How to create inheritance with LESS?

I'm used to use SASS and I'm trying to do the same thing in LESS, painfully.

LESS:

.btn {
    text-align: center;
    test: 5px;
    &:before {
        .fa();
        margin-right: 5px;
        // Acts like a space,no need of extra html markup or javascript.;
    }
    &:after {
        .fa();
        margin-left: 5px;
        // Acts like a space,no need of extra html markup or javascript.;
    }
}
.btn_primary {
    &:extend(.btn);
    &:extend(.btn-primary);
    .border-radius(4px);
    margin: 0 auto;
    color: @white;
    font-weight: bold;
    text-align: center;
    padding: 0px 10px auto;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    &:hover {
        color: @white;
        text-decoration: none;
        border: 1px solid @orange;
    }
    &.disabled {
        border: 1px solid @orange;
    }
}

Generated CSS:

.btn,
.btn_primary {
    text-align: center;
    test: 5px;
}
.btn:before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
}
.btn:after {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 5px;
}

Why don't I get the :before and :after in my .btn_primary class too? How can I fix this?

Upvotes: 1

Views: 63

Answers (2)

Harry
Harry

Reputation: 89750

To extend the nested classes (:before and :after in this case), you need to use the all directive when extending like below:

&:extend(.btn all);

LESS Code: (Some extra lines commented to enable compilation)

.btn {
    text-align: center;
    test: 5px;
    &:before {
        //.fa();
        margin-right: 5px;
        // Acts like a space,no need of extra html markup or javascript.;
    }
    &:after {
        //.fa();
        margin-left: 5px;
        // Acts like a space,no need of extra html markup or javascript.;
    }
}
.btn_primary {
    &:extend(.btn all);
    &:extend(.btn-primary);
    //.border-radius(4px);
    margin: 0 auto;
    color: @white;
    font-weight: bold;
    text-align: center;
    padding: 0px 10px auto;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    &:hover {
        color: @white;
        text-decoration: none;
        border: 1px solid @orange;
    }
    &.disabled {
        border: 1px solid @orange;
    }
}

@white: white;
@orange: orange;

Compiled CSS: (Only the relevant part)

.btn,
.btn_primary {
  text-align: center;
  test: 5px;
}
.btn:before,
.btn_primary:before {
  margin-right: 5px;
}
.btn:after,
.btn_primary:after {
  margin-left: 5px;
}

Note: extend feature was introduced only in LESS v1.4.0 and this works in all versions from there on.

Upvotes: 1

user2226755
user2226755

Reputation: 13159

You want to get this, isn't it ?

LESS :

.btn_primary {
    .btn();
    //...
}

CSS :

.btn_primary:before {
    //...
}
.btn_primary:after {
    //...
}

Upvotes: 0

Related Questions