CODEWITHSUNDEEP
cssless
dotnetnoob
dotnetnoob

Reputation: 11350

CSS Less Reference Psuedo element in Mixin

TI'm using Less and have started defining mixins.

I have created the following mixin so that I don't have to remember to add a "clearfix" class to every floated element.

.Clearfix
{
    clear:both;
    content:"";
    display:block;
    height: 0;
    visibility:hidden;
}

I reference the mixin like this:

.myclass:after
{
    .Clearfix;
}

It would be much better if I could reference the :after element in the mixin itself so that I could just apply it to my base class - is this possible?

Upvotes: 1

Views: 56

Answers (1)

Christophe
Christophe

Reputation: 4828

Do it like this:

.Clearfix
{
    &:after {
        clear:both;
        content:"";
        display:block;
        height: 0;
        visibility:hidden;
    }
}

it's like you would add css to a class and if it that element has another specific class you can nest it inside using the & sign. example:

.content {
    //some styling
    &.mobile {
        //some extra styling for .content if it also has the .mobile class
    } 
}

You can find this info on lesscss.org -> http://lesscss.org/features/#features-overview-feature-nested-rules They have an example that matches your code

Upvotes: 2

Related Questions