Reusing CSS LESS code

Question

For instance you have the following:

#nav {
position: relative;
background: transparent;
width: 100%;
color: #FFF;

.block {
    padding-top: 2em;
}

ul {
    border: none;
    margin: 0;

    li {
        border: none;
        .inline-block;
        font-size: 1em;
        padding: 0 0.4em;
        text-shadow: 1px 1px 1px #171717;

        a:link, a:visited {
            padding: 0;
            color: #777;
        }

        a:hover {
            color: @hover;
        }

        &.highlight a {
            color: @highlight;
        }

        &:hover {
            background: none;
            border: none;
        }
    }
}

}

If you wanted to use this same code 3 times in a stylesheet, is there a way of saving it as a variable or similar with LESS?

Answer 1

Sure, you can use previously defined class and id rulesets as properties for other definitions, like this:

.classname {
    #nav;
    /* further styling here */
}

for more info, see this link: http://lesscss.org/#-mixins