Gonzalo2683
5/10/2014 - 5:28 PM

Generated by SassMeister.com.

Generated by SassMeister.com.

SassMeister-input-HTML.html
content_copyfile_download
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prueba de Susy</title>
</head>
<body>
  <div class="contenedor">
    <div class="noticia">
      <h2>Noticia</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, consectetur fugit dignissimos hic nostrum eligendi odio perferendis excepturi. Accusantium, vel ab nemo consequatur aperiam veniam voluptas rem esse delectus maiores.</p>
    </div>
    <div class="sidebar">
      <h3>Sidebar</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, totam, nihil, optio, commodi veritatis nostrum et aspernatur dolorum nulla labore repellendus sequi deserunt enim autem reprehenderit quis omnis explicabo corporis aliquam perspiciatis eveniet blanditiis expedita possimus dolorem molestias! Sint, suscipit.</p>
    </div>
  </div>
</body>
</html>
SassMeister-input.scss
content_copyfile_download
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// Susy (v)
// ----

@import "susy";
.contenedor {
  @include container;  
}

.noticia {
  @include span(8 of 12);
}

.sidebar {
  @include span(4 of 12 last);
}
SassMeister-output.css
content_copyfile_download
.contenedor {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.contenedor:after {
  content: " ";
  display: block;
  clear: both;
}

.noticia {
  width: 66.10169%;
  float: left;
  margin-right: 1.69492%;
}

.sidebar {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}
SassMeister-rendered.html
content_copyfile_download
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prueba de Susy</title>
</head>
<body>
  <div class="contenedor">
    <div class="noticia">
      <h2>Noticia</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, consectetur fugit dignissimos hic nostrum eligendi odio perferendis excepturi. Accusantium, vel ab nemo consequatur aperiam veniam voluptas rem esse delectus maiores.</p>
    </div>
    <div class="sidebar">
      <h3>Sidebar</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, totam, nihil, optio, commodi veritatis nostrum et aspernatur dolorum nulla labore repellendus sequi deserunt enim autem reprehenderit quis omnis explicabo corporis aliquam perspiciatis eveniet blanditiis expedita possimus dolorem molestias! Sint, suscipit.</p>
    </div>
  </div>
</body>
</html>