Created
June 20, 2014 00:53
-
-
Save garmjs/4ffeec958dd4d933ad75 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="box home"> | |
| <h1>Lorem</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, nobis!</p> | |
| </div> | |
| <div class="box about"> | |
| <h1>Lorem</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, excepturi consequatur ipsa quod doloremque perferendis dolores itaque qui officia vitae architecto sunt laudantium praesentium impedit nam ab nulla vero quos.</p> | |
| </div> | |
| <div class="box contact"> | |
| <H1>Lorem</H1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, unde in libero exercitationem atque doloribus perspiciatis quos ducimus aperiam maiores! Repellendus adipisci excepturi soluta qui non iste veritatis voluptatum illum.</p> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.3.8) | |
| // Compass (v1.0.0.alpha.19) | |
| // ---- | |
| .box { | |
| width: 300px; | |
| height: 200px; | |
| margin: .5em; | |
| float: left; | |
| } | |
| $colors: ( | |
| home: red, | |
| about: green, | |
| contact: orange | |
| ); | |
| @each $section, $color in $colors { | |
| .#{$section} { | |
| border-bottom: 10px solid #{$color}; | |
| border-right: 3px solid #{$color}; | |
| h1 { | |
| background-color: #{$color}; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .box { | |
| width: 300px; | |
| height: 200px; | |
| margin: .5em; | |
| float: left; | |
| } | |
| .home { | |
| border-bottom: 10px solid red; | |
| border-right: 3px solid red; | |
| } | |
| .home h1 { | |
| background-color: red; | |
| } | |
| .about { | |
| border-bottom: 10px solid green; | |
| border-right: 3px solid green; | |
| } | |
| .about h1 { | |
| background-color: green; | |
| } | |
| .contact { | |
| border-bottom: 10px solid orange; | |
| border-right: 3px solid orange; | |
| } | |
| .contact h1 { | |
| background-color: orange; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="box home"> | |
| <h1>Lorem</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, nobis!</p> | |
| </div> | |
| <div class="box about"> | |
| <h1>Lorem</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, excepturi consequatur ipsa quod doloremque perferendis dolores itaque qui officia vitae architecto sunt laudantium praesentium impedit nam ab nulla vero quos.</p> | |
| </div> | |
| <div class="box contact"> | |
| <H1>Lorem</H1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, unde in libero exercitationem atque doloribus perspiciatis quos ducimus aperiam maiores! Repellendus adipisci excepturi soluta qui non iste veritatis voluptatum illum.</p> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment