Cacher is the code snippet organizer for pro developers

$widthSidebarLeft: 200px;
$widthSidebarRight: 250px;

.middle__container {
    width: 100%;
    overflow: auto; // Height clearfix
    .content__wrapper {
        width: 100%;
        float: left;
        box-sizing: border-box;
        padding-left: $widthSidebarLeft;
        padding-right: $widthSidebarRight;
    }
    .sidebar__left,
    .sidebar__right {
        float: left;
    }
    .sidebar__left {
        width: $widthSidebarLeft;
        margin-left: -100%;
    }
    .sidebar__right {
        background: #080;
        width: $widthSidebarRight;
        margin-left: -$widthSidebarRight;
    }
}


// Example styles
.middle__container {
    max-width: 1200px;
    margin: 20px auto;
    background: #ccf;
    overflow: auto;
    .content,
    .sidebar__left,
    .sidebar__right {
        box-sizing: border-box;
        padding: 20px;
    }
    .content {
        background: #eee;
    }
    .sidebar__left,
    .sidebar__right {
        background: #cfc;
    }
}

.middle__container
    .content__wrapper
        .content
            div Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi soluta at quos natus aut, quidem distinctio atque aliquid odit. Totam quisquam illo consequatur, hic quasi consequuntur, fuga sunt. Doloremque, tempora!
    .sidebar__left
        div Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, non. Natus iure, dolor dolorum tempore. Molestiae soluta, inventore exercitationem cum nihil error ea enim provident doloribus dicta ducimus eos, rerum?
    .sidebar__right
        div Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae consequatur fugit suscipit deleniti in aut, perspiciatis ad nesciunt, praesentium minima molestiae ducimus nobis tenetur quod rem maxime est accusantium eius.