Demo: CSS Regions
This is the source material
This is the target location
<div class='source'> <p> This is the source material </p> </div> <div class='new-container'> <p> This is the target location </p> </div>
.source %p This is the source material .new-container %p This is the target location
@import "compass/css3"; .source { @include flow-into(target); border: 10px solid green; margin: 20px; width: 200px; } .new-container { @include flow-from(target); border: 10px solid red; margin: 20px; width: 200px; }
@import compass/css3 .source +flow-into(target) border: 10px solid green margin: 20px width: 200px .new-container +flow-from(target) border: 10px solid red margin: 20px width: 200px
.source { -ms-flow-into: target; -webkit-flow-into: target; flow-into: target; border: 10px solid green; margin: 20px; width: 200px; } .new-container { -ms-flow-from: target; -webkit-flow-from: target; flow-from: target; border: 10px solid red; margin: 20px; width: 200px; }