mirisuzanne

<div class="newApp">
  <div class="rounded">
    <ul>
    {{#each tasksToDo}}
        {{>task}}
    {{/each}}
    </ul>
  </div>

  <div class="rounded2">

mirisuzanne

// ----
// libsass (v3.2.5)
// ----

.test {
  @each $item in 'one' {
    item: $item;
  }
}

mirisuzanne

// ----
// libsass (v3.2.5)
// ----

$function: 'hsl';
$hue: 360;
$value: (30%, 40%);

.test {
  // This doesn't work in libsass

mirisuzanne

<div class="container">
     <div class="test">hello</div>
     <div class="test2">hello</div>
     <div class="test">hello</div>
</div>

mirisuzanne

<div class="container">
     <div class="test">hello</div>
     <div class="test2">hello</div>
     <div class="test">hello</div>
</div>

mirisuzanne

// # Current Settings
// `columns` [integer | list] - the number, or asymmetric distribution of columns in a grid
// `gutters` [float] - the ratio of a gutter to a column
// `column-width` [null | length] - the width of a column, used for calculating static columns and gutters
$susy: (
  'columns': 4,
  'gutters': 0.25,
  'column-width': null,
);

mirisuzanne

    <ul class="sg-colors">
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>
      <li class="sg-color"></li>

mirisuzanne

<main id="grid">
 <section id="main_background_container">
     <div id="main_side_img">main_side_img</div>
     <div id="main_primary_container">main_primary_container</div>
 </section>
</main>

mirisuzanne

<div class="container">
<main>main (8 at 1)</main>
<aside>aside (4 at 9)</aside>
<div class="box">box (last 3)</div>
</div>

mirisuzanne

  <main class="container">
    <div class="narrow">narrow</div>
    <div class="wide">wide</div>
    <div class="wider">wider</div>
  </main>