Skip to content

Instantly share code, notes, and snippets.

@ErikGrijzen

ErikGrijzen/SassMeister-input-HTML.html

Created January 12, 2016 20:41
Show Gist options
  • Save ErikGrijzen/b5e3ffb34758b6977dc0 to your computer and use it in GitHub Desktop.
Save ErikGrijzen/b5e3ffb34758b6977dc0 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<head>
</head>
<body>
<main>
<section class="grid-span3">3</section>
<section class="grid-span3">3</section>
<section class="grid-span3">3</section>
<section class="grid-span3 last">3</section>
<section class="grid-span4">4</section>
<section class="grid-span4">4</section>
<section class="grid-span4 last">4</section>
<section class="grid-span6">6</section>
<section class="grid-span6 last">6</section>
<section class="grid-span12">12</section>
</main>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
@import "susy";
$susy: (
container: 1200px,
columns: 12,
column-width: 80px,
global-box-sizing: border-box,
gutter-position: after,
gutters: 20px/44px,
);
$bp-small: 480px;
$bp-medium: 768px;
$bp-large: 992px;
$bp-xlarge: 1200px;
$l-medium: 12 (44px 20px);
$l-large: 12 (64px 20px);
$l-xlarge: 12 (81px 20px);
*,
*:before,
*:after {
box-sizing: border-box;
}
main {
padding: 0 10px;
@include susy-breakpoint($bp-medium) {
@include container;
padding: 0;
}
@include susy-breakpoint($bp-large) {
@include container();
}
}
section {
padding: 10px 0;
margin-top: 20px;
border: 1px solid black;
background: rgba(80, 80, 80, 0.5);
text-align: center;
overflow: hidden;
}
.grid-span3 {
@include susy-breakpoint($bp-medium) {
@include span(3);
}
@include susy-breakpoint($bp-large, $l-large) {
@include span(3);
}
@include susy-breakpoint($bp-xlarge, $l-xlarge) {
@include span(3);
}
}
.grid-span3.last {
@include susy-breakpoint($bp-medium) {
@include span(3 last);
}
@include susy-breakpoint($bp-large, $l-large) {
@include span(3 last);
}
@include susy-breakpoint($bp-xlarge, $l-xlarge) {
@include span(3 last);
}
}
.grid-span4 {
@include susy-breakpoint($bp-medium) {
@include span(4);
}
@include susy-breakpoint($bp-large, $l-large) {
@include span(4);
}
@include susy-breakpoint($bp-xlarge, $l-xlarge) {
@include span(4);
}
}
.grid-span4.last {
@include susy-breakpoint($bp-medium) {
@include span(4 last);
}
@include susy-breakpoint($bp-large, $l-large) {
@include span(4 last);
}
@include susy-breakpoint($bp-xlarge, $l-xlarge) {
@include span(4 last);
}
}
.grid-span6 {
@include susy-breakpoint($bp-medium) {
@include span(6);
}
@include susy-breakpoint($bp-large, $l-large) {
@include span(6);
}
@include susy-breakpoint($bp-xlarge, $l-xlarge) {
@include span(6);
}
}
.grid-span6.last {
@include susy-breakpoint($bp-medium) {
@include span(6 last)
}
@include susy-breakpoint($bp-large, $l-large) {
@include span(6 last);
}
@include susy-breakpoint($bp-xlarge, $l-xlarge) {
@include span(6 last);
}
}
.grid-span12 {
@include susy-breakpoint($bp-medium) {
@include span(12);
}
}
Raw
SassMeister-output.css
*,
*:before,
*:after {
box-sizing: border-box;
}
main {
padding: 0 10px;
}
@media (min-width: 768px) {
main {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 0;
}
main:after {
content: " ";
display: block;
clear: both;
}
}
@media (min-width: 992px) {
main {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
main:after {
content: " ";
display: block;
clear: both;
}
}
section {
padding: 10px 0;
margin-top: 20px;
border: 1px solid black;
background: rgba(80, 80, 80, 0.5);
text-align: center;
overflow: hidden;
}
@media (min-width: 768px) {
.grid-span3 {
width: 22.99465%;
float: left;
margin-right: 2.6738%;
}
}
@media (min-width: 992px) {
.grid-span3 {
width: 23.48178%;
float: left;
margin-right: 2.02429%;
}
}
@media (min-width: 1200px) {
.grid-span3 {
width: 23.74161%;
float: left;
margin-right: 1.67785%;
}
}
@media (min-width: 768px) {
.grid-span3.last {
width: 22.99465%;
float: right;
margin-right: 0;
}
}
@media (min-width: 992px) {
.grid-span3.last {
width: 23.48178%;
float: right;
margin-right: 0;
}
}
@media (min-width: 1200px) {
.grid-span3.last {
width: 23.74161%;
float: right;
margin-right: 0;
}
}
@media (min-width: 768px) {
.grid-span4 {
width: 31.5508%;
float: left;
margin-right: 2.6738%;
}
}
@media (min-width: 992px) {
.grid-span4 {
width: 31.98381%;
float: left;
margin-right: 2.02429%;
}
}
@media (min-width: 1200px) {
.grid-span4 {
width: 32.21477%;
float: left;
margin-right: 1.67785%;
}
}
@media (min-width: 768px) {
.grid-span4.last {
width: 31.5508%;
float: right;
margin-right: 0;
}
}
@media (min-width: 992px) {
.grid-span4.last {
width: 31.98381%;
float: right;
margin-right: 0;
}
}
@media (min-width: 1200px) {
.grid-span4.last {
width: 32.21477%;
float: right;
margin-right: 0;
}
}
@media (min-width: 768px) {
.grid-span6 {
width: 48.6631%;
float: left;
margin-right: 2.6738%;
}
}
@media (min-width: 992px) {
.grid-span6 {
width: 48.98785%;
float: left;
margin-right: 2.02429%;
}
}
@media (min-width: 1200px) {
.grid-span6 {
width: 49.16107%;
float: left;
margin-right: 1.67785%;
}
}
@media (min-width: 768px) {
.grid-span6.last {
width: 48.6631%;
float: right;
margin-right: 0;
}
}
@media (min-width: 992px) {
.grid-span6.last {
width: 48.98785%;
float: right;
margin-right: 0;
}
}
@media (min-width: 1200px) {
.grid-span6.last {
width: 49.16107%;
float: right;
margin-right: 0;
}
}
@media (min-width: 768px) {
.grid-span12 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
}
Raw
SassMeister-rendered.html
<html>
<head>
</head>
<body>
<main>
<section class="grid-span3">3</section>
<section class="grid-span3">3</section>
<section class="grid-span3">3</section>
<section class="grid-span3 last">3</section>
<section class="grid-span4">4</section>
<section class="grid-span4">4</section>
<section class="grid-span4 last">4</section>
<section class="grid-span6">6</section>
<section class="grid-span6 last">6</section>
<section class="grid-span12">12</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment