Skip to content

Instantly share code, notes, and snippets.

@blackfalcon
Last active August 29, 2015 14:20
Show Gist options
  • Save blackfalcon/5e8eac11e4d0d6f6b78a to your computer and use it in GitHub Desktop.
Save blackfalcon/5e8eac11e4d0d6f6b78a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
.block
-(1..6).each do |i|
.element #{i}
// ----
// libsass (v3.1.0)
// ----
// general design visuals, ignore for practical purposes.
.block {
background-color: orange;
}
.element {
box-sizing: border-box;
padding: 1em;
border: 1px dashed gray;
background-color: white;
}
// Place in Functions related dir
@function gutter-value($arg, $gutter) {
@if $gutter {
$value: 100 / $arg - 1 * 1%;
} @else {
$value: 100 / $arg * 1%;
}
@return $value
}
// Place in mixins related dir
@mixin flex-grid-container($wrap: null) {
display: flex;
flex-wrap: $wrap;
@if $wrap {
justify-content: space-between;
}
}
@mixin flex-grid-item($arg, $gutter: null, $margin: null) {
flex-basis: gutter-value($arg, $gutter);
@if $margin != null {
margin-bottom: $margin;
&:nth-last-child(-n+#{$arg}) {
margin-bottom: 0;
}
}
}
// styles to be used in CSS
.block {
@include flex-grid-container(wrap);
}
.element {
@include flex-grid-item(2, true, 1em);
}
.block {
background-color: orange; }
.element {
box-sizing: border-box;
padding: 1em;
border: 1px dashed gray;
background-color: white; }
.block {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.element {
flex-basis: 49%;
margin-bottom: 1em; }
.element:nth-last-child(-n+2) {
margin-bottom: 0; }
<div class='block'>
<div class='element'>1</div>
<div class='element'>2</div>
<div class='element'>3</div>
<div class='element'>4</div>
<div class='element'>5</div>
<div class='element'>6</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment