Mixin calling a Mixin

by khamer

HTML

<link rel="stylesheet" href="https://imarc.github.io/boilerplate/css/styles.css">
<div class="torso">
  <main>
    <section class="news">
      <div class="story">
        <h2>Lorem ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores nesciunt nihil, quae, velit architecto vero.</p>
      </div>
      <div class="story">
        <h2>Incidunt, culpa, sunt.</h2>
        <p>Sequi, facere incidunt exercitationem. Facilis quidem omnis, ipsa a nihil numquam praesentium. Blanditiis totam, eum.</p>
      </div>
      <div class="story">
        <h2>Necessitatibus, excepturi animi!</h2>
        <p>Consectetur magni, pariatur aspernatur, fuga voluptatem quam reiciendis unde earum impedit sequi commodi deleniti temporibus.</p>
      </div>
      <div class="story">
        <h2>Earum, in eligendi.</h2>
        <p>Quae sint, quasi. Iusto commodi voluptatum enim, consectetur quaerat consequuntur, corporis voluptate at sunt quis.</p>
      </div>
      <div class="story">
        <h2>Deleniti, dolorem, autem!</h2>
        <p>Accusamus dolores esse tenetur expedita perferendis, amet, voluptas deserunt sapiente pariatur ut repudiandae provident nostrum!</p>
      </div>
    </section>
  </main>
</div>

<div class="employees">
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img src="http://lorempixel.com/500/500/" alt=""></div>
  <div><img...

SCSS

$medium: 669px;
$large: 1024px;

@mixin tiles($gutter: 2rem, $columns: 4) {
    > * {
        background-color: #EEE;
        border-radius: 8px;
        margin-bottom: $gutter;
        padding: 2rem;
        text-align: left;
        *:last-child {
            margin-bottom: 0;
        }
    }
    @media only screen and (min-width: $medium) {
        display: flex;
        flex-flow: row wrap;
        > * {
            flex-basis: calc(50% - #{$gutter});
            flex-shrink: 0;
            margin-left: $gutter / 2;
            margin-right: $gutter / 2;
        }
    }
    @media only screen and (min-width: $large) {
        > * {
            flex-basis: calc((100% / #{$columns}) - (#{$gutter}));
        }
    }
}

@mixin mosaic($gutter: 0px, $columns: 6) {
  @include tiles($gutter: $gutter, $columns: $columns);
  > * {
    padding: 0;
  }
}

////
/// Styles.scss
////

.news {
  @include tiles($columns: 3);
  
  > * {
    background-color: #dfd;
    border-top: 5px solid #cdc;
  }
}

.employees {
  @include mosaic;
}