// LESS
#one {
    color: red;
    .two {
        background: yellow;
         .three {
             width:100%;
         }
    }
}

.four {
    #one > .two;
} 


// Output

#one {
    color: red;
}
#one .two {
    background: yellow;
}
#one .two .three {
    width: 100%;
}
.four {
    background: yellow;
}
.four .three {
    width: 100%;
}

/* BACKGROUND: 

LESS allows extending of nested selectors, which Sass does not. 
See http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#selector_sequences
So you can't do @extend #one > .two for instance. 

So the inheritance has to work the other way around

*/

#one {
    color: red;
    .two {
        @extend .four;
    }
}

.four {
    background: yellow;
    .three {
        width:100%;
    }
}


// Output 
#one {
    color: red; 
}
.four, #one .two {
    background: yellow; 
}
.four .three, #one .two .three {
    width: 100%; 
}

/* alternative, more verbose syntax */
%something {
    background: yellow;
    .three {
        width:100%;
    }
}

#one {
    color: red;
    .two {
        @extend %something;
    }
}

.four {
    @extend %something;
}


// Output
#one .two, .four { 
    background: yellow; 
}
#one .two .three, .four .three { 
    width: 100%; 
}
#one {  
    color: red; 
}