Getting Started with Less

Nesting

Nesting

Nesting with Less is probably the best feature you'll love immediately! It's cleaner and faster to write CSS. It's also the easiest thing to learn since it feels like a natural missing extension of CSS code.

Here's an example of your old and gross CSS code:

.fancy-link {
    display: inline-block;
    padding: 25px 50px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    -webkit-transition: all 225ms ease;
    -moz-transition: all 225ms ease;
    transition: all 225ms ease;

    background: #ff4d4c;
    color: #fff;
    border: solid 2px #ff8080;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.24);

    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    outline: none;
}
.fancy-link .icon {
    font-weight: 700;
    font-style: italic;
    opacity: 0.6;

    -webkit-transition: inherit;
    -moz-transition: inherit;
    transition: inherit;
}

.fancy-link:hover,
.fancy-link:focus {
    background: #ff4d4c;
    border-color: #ff8080;
}

.fancy-link:hover .icon,
.fancy-link:focus .icon {
    opacity: 1;
}

.fancy-link:active {
    background: #b73e3d;
}

.fancy-link:active .icon {
    opacity: 0;
}

So much code to write! Let's DRY it up with Less:

.fancy-link {
    display: inline-block;
    padding: 25px 50px;

    /* We have auto-prefixing enabled */
    border-radius: 2px;

    transition: all 225ms ease;

    background: #ff4d4c;
    color: #fff;
    border: solid 2px #ff8080;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.24);

    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    outline: none;

    .icon {
        font-weight: 700;
        font-style: italic;
        opacity: 0.6;

        transition: inherit;
    }

    &:hover, &:focus {
        background: #ff4d4c;
        border-color: #ff8080;   

        .icon { opacity: 1; } 
    }

    &:active {
        background: #b73e3d;

        .icon { opacity: 0; }
    }
}

You can hopefully immediately see how much cleaner that is to write!

Nesting Selectors, Elements, and Classes

You can nest any selectors you want:

// Not nested (option 0)
#container .box .item {}

// Nested (option 1)
#container {
    .box {
        .item {

        }
    }
}

// Nested (option 2)
#container .box {
    .item {

    }
}

// Nested (option 3)
#container {
    .box .item {

    }

    #something-else {}


    div h3 span.something-else {

    }
}

You can technically nest in any combination and depth that you want.

Nesting Pseudo-Classes and Pseudo-Elements

You can also use the & symbol in nesting to also include variations of the parent class. For example:

.item {
    color: red;
    margin-left: 25px;
    margin-right: 25px;

    &:hover, &:focus {
        color: black
    }

    &.make-bolded {
        font-weight: 700;
    }

    &:first-child { margin: margin-left: 0; }
    &:last-child { margin: margin-right: 0; }
}

An example with Pseudo-Elements:

.item {
    &:before {}
    &:after {}
}

A Warning About Nesting

Nesting is extremely helpful for organizing your Less into "chunks" or groups. But, this can become really ugly quick if you're not careful:

`less // Avoid This ul.fancy-list { li { a { color: blue; }

    ul {
        li {
            a { color: green; }

            ul {
                li {
                    a {
                        color: red;
                    }
                }
            }
        }
    }
}

}

// Better Option ul.fancy-list { li a { color: blue; } li ul li a { color: green; } li ul li ul li a { color: red; } }

// Even Better Option ul.fancy-list { li a { color: blue; } li li a { color: green; } li li li a { color: red; } }