การเขียน class ซ้อน class ด้วย less css

        ประโยชน์ คือมันช่วยให้งานเราง่ายขึ้นครับ สามารถจัดกลุ่ม จัดลำดับชั้นของการเขียน css ได้ดีขึ้น สบายตาขึ้น  ดูปุ๊ป รู้ปั๊ป ว่า อันไหน เป็นลูกของอันไหน เพราะไม่มีการเขียนซ้ำซ้อน  เหมือนที่เราเขียน css ธรรมดา

#layoutWest-resizer.ui-layout-resizer-west-closed{
    background-color : @grayColor;
    border : solid @grayBorderColor;
    border-width : 0px 1px 0px 0px;
    .round-box(0px, 0px, 0px, 0px);

    #layoutWest-toggler{
        position : relative !important;
        top : 45% !important;
        height : 32px !important;
        width : 32px !important;

        .ui-state-default{
            background : none;
            border : none;
            .box-shadow(0px, 0px, 0px, #fff);

            .ui-icon{
                background-image : url('../images/expand-arrow.png');
                background-position : 0px 0px;
                width : 32px;
                height : 32px;
                position : relative;
                right : 7px;
            }
        }

        .ui-state-default:hover{
            .box-shadow(0px, 0px, 0px, #fff);
            .ui-icon{
                background-image : url('../images/expand-arrow-hover.png');
                background-position : 0px 0px;
                width : 32px;
                height : 32px;
            }
        }
    }
}

        หลังจากนั้น  โค๊ดข้างบนนี้ก็จะถูกคอมไพล์ใหม่ กลายเป็น css ธรรมดา ซึ่ง class ไหนที่ซ้อนกันอยู่ก็จะถูกคอมไพล์เป็นอีกชุดนึง

จากโค๊ดข้างบน   จะได้เป็น

#layoutWest-resizer.ui-layout-resizer-west-closed{
    background-color : #ddd;
    border : solid #ccc;
    border-width : 0px 1px 0px 0px;
    border-radius : 0px;
    -moz-border-radius : 0px;
    -webkit-border-radius : 0px;
}

#layoutWest-resizer.ui-layout-resizer-west-closed #layoutWest-toggler{
    position : relative !important;
    top : 45% !important;
    height : 32px !important;
    width : 32px !important;
}

#layoutWest-resizer.ui-layout-resizer-west-closed #layoutWest-toggler .ui-state-default{
    background : none;
    border : none;
    box-shadow : 0px, 0px, 0px, #fff;
    -moz-box-shadow : 0px, 0px, 0px, #fff;
    -webkit-box-shadow : 0px, 0px, 0px, #fff;
}

#layoutWest-resizer.ui-layout-resizer-west-closed #layoutWest-toggler .ui-state-default .ui-icon{
    background-image : url('../images/expand-arrow.png');
    background-position : 0px 0px;
    width : 32px;
    height : 32px;
    position : relative;
    right : 7px;
      
}

#layoutWest-resizer.ui-layout-resizer-west-closed #layoutWest-toggler .ui-state-default:hover{
    box-shadow : 0px, 0px, 0px, #fff;
    -moz-box-shadow : 0px, 0px, 0px, #fff;
    -webkit-box-shadow : 0px, 0px, 0px, #fff;
}

#layoutWest-resizer.ui-layout-resizer-west-closed #layoutWest-toggler .ui-state-default:hover .ui-icon{
    background-image : url('../images/expand-arrow-hover.png');
    background-position : 0px 0px;
    width : 32px;
    height : 32px;
}