soderalohastrom

<div class="block1">
<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>
</div>

soderalohastrom

// Generate responsive rules
$max-resolution: 1920px;
$cell-width: 250px; 
// actual cell width should = $cell-width ( 1 - ( 1 / ceil( [the-browser-resolution] / $cell-width ) )

@for $i from 0 to ceil($max-resolution/$cell-width) {
    $min: $i * $cell-width;
    $max: ($i + 1) * $cell-width;
    @include respond-between($min,$max) {
        $width: 100% / ($i + 1);

soderalohastrom

img {
  display: block;
  max-width: 100%;
}

.gallery {
  ul {
    @extend .cfx;
    list-style: none;
    margin: -.25em;

soderalohastrom

* {
  box-sizing: border-box; 
}

body {
  background: #222;
}

@mixin rowMachine($numPerRow, $margin) {
  width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);

soderalohastrom

- for (var x = 1; x < 16; x++)
  div.person
    img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/darth-vader.jpg")
    h3 Darth

soderalohastrom

* {
  box-sizing: border-box; 
}

body {
  background: #222;
}

@mixin rowMachine($numPerRow, $margin) {
  width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);

soderalohastrom

@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: 64.375em) { @content; }
  }
  @else if $point == medium {
    @media (min-width: 50em) { @content; }
  }
  @else if $point == small {
    @media (min-width: 37.5em)  { @content; }
  }

soderalohastrom

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }

soderalohastrom

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}


// Usage:

.article-heading {

soderalohastrom

@function black($opacity) {
  @return rgba(black, $opacity)
}
@function white($opacity) {
  @return rgba(white, $opacity)
}