Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="sidebar"><h2>Sidebar</h2></div>
<div class="main">
  <h2>Main</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</div>
<div class="footer"><h2>Footer</h2></div>
<div class="header"><h2>Header</h2></div>

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

body {
  /* First, we define body as a grid element */
  display: -webkit-grid;

  /* Then, we define the number of columns we want by setting their dimensions */
  /* Beware, gaps between columns will be actual columns too */
  /* 1. This means there are 3 columns: 
   * the first one is 200px wide
   * the second one will be a margin (1%) 
   * the third one will occupy the remaining space 
   */
  -webkit-grid-template-columns: 200px 1% 1fr; /* 1 */

  /* Now we define the number of rows and their dimensions */
  /* 2. this means there are 5 rows: 
   * the first one will be sized according to its content
   * the second one will be a margin
   * the third one will be sized according to its content
   * the fourth one will be a margin as well
   * the last one will be sized according to its content 
   */
  -webkit-grid-template-rows: auto 15px auto 15px auto; /* 2 */

  /* The body element is now a 3*5 grid. */
}

/* Both the header and the footer will be full width, so we have to make them occupy the 3 columns */
.header,
.footer {
  -webkit-grid-column: span 3;
}

/* Let's define in which row the header will be: the first one */
.header {
  -webkit-grid-row: 1;
}

/* Same for the footer: the last one so the fifth (remember margins count as cols/rows */
.footer {
  -webkit-grid-row: 5;
}

.sidebar {
  /* The sidebar will occupy the first column which is 200px wide */
  -webkit-grid-column: 1;
  /* And the 3rd row (there are the header and a margin before) */
  -webkit-grid-row: 3;
}

.main {
  /* The main content will be on the 3rd column and the 3rd row */
  -webkit-grid-column: 3;
  -webkit-grid-row: 3;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.sidebar {
  background: gold;
}

SassMeister-output.css

body {
  /* First, we define body as a grid element */
  display: -webkit-grid;
  /* Then, we define the number of columns we want by setting their dimensions */
  /* Beware, gaps between columns will be actual columns too */
  /* 1. This means there are 3 columns: 
   * the first one is 200px wide
   * the second one will be a margin (1%) 
   * the third one will occupy the remaining space 
   */
  -webkit-grid-template-columns: 200px 1% 1fr;
  /* 1 */
  /* Now we define the number of rows and their dimensions */
  /* 2. this means there are 5 rows: 
   * the first one will be sized according to its content
   * the second one will be a margin
   * the third one will be sized according to its content
   * the fourth one will be a margin as well
   * the last one will be sized according to its content 
   */
  -webkit-grid-template-rows: auto 15px auto 15px auto;
  /* 2 */
  /* The body element is now a 3*5 grid. */
}

/* Both the header and the footer will be full width, so we have to make them occupy the 3 columns */
.header,
.footer {
  -webkit-grid-column: span 3;
}

/* Let's define in which row the header will be: the first one */
.header {
  -webkit-grid-row: 1;
}

/* Same for the footer: the last one so the fifth (remember margins count as cols/rows */
.footer {
  -webkit-grid-row: 5;
}

.sidebar {
  /* The sidebar will occupy the first column which is 200px wide */
  -webkit-grid-column: 1;
  /* And the 3rd row (there are the header and a margin before) */
  -webkit-grid-row: 3;
}

.main {
  /* The main content will be on the 3rd column and the 3rd row */
  -webkit-grid-column: 3;
  -webkit-grid-row: 3;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.sidebar {
  background: gold;
}

SassMeister-rendered.html

<div class="sidebar"><h2>Sidebar</h2></div>
<div class="main">
  <h2>Main</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</div>
<div class="footer"><h2>Footer</h2></div>
<div class="header"><h2>Header</h2></div>