element declaration pattern using pre-processors

.element{
    // properties
    width: 100%;
    height: 50px;
    // mixins
    .verticalGradient(#ffffff, #000000);
    .boxSizing();

    // modifiers
    &.small{
        width: 50%;
        height: 25px;
    }
    &.disabled{
        background: #f5f5f5;
    }

    //pseudo-class
    &:hover{}
    &:focus{}
    &:active{}

    // pseudo-elements
    &:after{}
    &:before{}
    &:first-child{}
    &:last-child{}

    // children's
    header{}
    footer{}
    .content{}
}