Getting Started with Less

More on Mixins

More on Mixins

Once you start using variables and mixins together, your .less becomes insanely powerful. You'll be writing faster and better than ever before.

Let's cover some additional use cases:

Nested Mixins

Mixins can have nested properties and elements. They also can call other mixins. The possibilities are endless.

For example, this mixin:

@header: #777;
@link-color: #ff7373;


// Transition Mixin
.default-transition() {
    transition: all 225ms ease;
}

// Easy Post Item Mixin
.easy-post-item() {
    position: relative;
    display: block;
    background: red;
    border-radius: 2px;
    padding: 25px;
    background: #fff;
    max-width: 500px;
    margin: 0 auto;

    h2 {
        font-size: 22px;
        margin-top: 0;

        a {
            display: block;
            color: @header;
            text-decoration: none;
            .default-transition;

            &:hover, &:focus {
                color: @link-color;
            }
        }
    }

    p {
        font-style: italic;
        opacity: 0.9;
    }

    .more-link {
        font-size: 25px;
        color: @link-color;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 14px;
                  text-decoration: none;
        .default-transition;

        &:hover, &:focus {
            opacity: 0.8;
        }
    }
}

.post-item {
  .easy-post-item;
}

Could be called very easily like so:

.post-item {
    .easy-post-item;
}

Pretty awesome right? What I like to do is make all my easy-post-item classes private though by adding the (). Then, as I jump from project to project, I can reuse a little bit of code to speed up my development time.