Skip to content

Instantly share code, notes, and snippets.

@stephanpavlovic

stephanpavlovic/SassMeister-input-HTML.html

Last active August 29, 2015 14:07
Show Gist options
  • Save stephanpavlovic/c7ab9fcb56fbeb29e6fb to your computer and use it in GitHub Desktop.
Save stephanpavlovic/c7ab9fcb56fbeb29e6fb to your computer and use it in GitHub Desktop.
Download ZIP
With Flexbox
Raw
SassMeister-input-HTML.html
<div class='wrapper'>
<div class='box'>
Hi
</div>
<div class='box'>Hi</div>
<div class='box'>Hi</div>
<div class='box'>Hi</div>
</div>
Raw
SassMeister-input.sass
// ----
// Sass (v3.4.5)
// Compass (v1.0.1)
// ----
.box
min-width: 200px
height: 100px
background: #006FBB
border: 1px solid white
padding: 10px
color: white
.wrapper
border: 4px solid #00933D
height: 200px
display: flex
flex-flow: row wrap
align-items: center
justify-content: space-around
.box
flex: none
Raw
SassMeister-output.css
.box {
min-width: 200px;
height: 100px;
background: #006FBB;
border: 1px solid white;
padding: 10px;
color: white;
}
.wrapper {
border: 4px solid #00933D;
height: 200px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}
.wrapper .box {
flex: none;
}
Raw
SassMeister-rendered.html
<div class='wrapper'>
<div class='box'>
Hi
</div>
<div class='box'>Hi</div>
<div class='box'>Hi</div>
<div class='box'>Hi</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment