Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="page">  
  
  

<p>
  <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
  </ul>
</p>

</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----

@import "compass";
@import "susy";

// -----------------------------------------
// Compas Vertical Rythm
// -----------------------------------------

$base-font-size: 16px; // Sets the base font size
$base-line-height: 23px; // Sets the base line height 

$round-to-nearest-half-line: true; // Allows compass to round to  multiples of 0.5x line height 

$rhythm-unit: "rem"; // Sets rhythm unit to rem. Remove to use default em unit.

$show-baseline-grid-backgrounds : true;

$grid-background-baseline-color : rgba(0, 0, 0, 0.2);

// -----------------------------------------
// Susy default settings
// -----------------------------------------
@import "susy";

$susy: (
    container: 80%,
    columns: 12,
    gutters: 1/4,
    math: fluid,
    output: float,
    gutter-position: after,
    debug: (
      image: show,
      color: rgba(#9cd5ed, 0.25),
      output: background,
      toggle: top right,
    ),
);

// Establishes baseline with Compass.
@include establish-baseline;




// STYLES
html{
    //@include baseline-grid-background;
}

.page {
  @include container();
}

main[role="main"] {
  @include span(9 of 12);
}

aside{
  @include span(3 of 12 last);
}

SassMeister-output.css

html {
  font-size: 100%;
  line-height: 1.4375em;
}

.page {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzljZDVlZCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiNkZGYwZjkiIHN0b3Atb3BhY2l0eT0iMC4yNSIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(156, 213, 237, 0.25)), color-stop(80%, rgba(221, 240, 249, 0.25)), color-stop(80%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 50% 0%, 50% 1, color-stop(100%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(left, rgba(156, 213, 237, 0.25), rgba(221, 240, 249, 0.25) 80%, rgba(0, 0, 0, 0) 80%), -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 1px, rgba(0, 0, 0, 0) 1px);
  background-image: -webkit-linear-gradient(left, rgba(156, 213, 237, 0.25), rgba(221, 240, 249, 0.25) 80%, rgba(0, 0, 0, 0) 80%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 1px, rgba(0, 0, 0, 0) 1px);
  background-image: linear-gradient(to right, rgba(156, 213, 237, 0.25), rgba(221, 240, 249, 0.25) 80%, rgba(0, 0, 0, 0) 80%), linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 8.47458%, 100% 23px;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
  background-position: left top;
}
.page:after {
  content: " ";
  display: block;
  clear: both;
}

main[role="main"] {
  width: 74.57627%;
  float: left;
  margin-right: 1.69492%;
}

aside {
  width: 23.72881%;
  float: right;
  margin-right: 0;
}

SassMeister-rendered.html

<div class="page">  
  
  

<p>
  <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
  </ul>
</p>

</div>