Skip to content

Instantly share code, notes, and snippets.

@jdsteinbach

jdsteinbach/SassMeister-input-HTML.html

Created March 20, 2015 15:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jdsteinbach/1e7bf193744c7f5dad4d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jdsteinbach/1e7bf193744c7f5dad4d to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class = "container">
<div class = "Plum">
<h3>Plum</h3>
</div>
<div class = "Blue">
<h3>Blue</h3>
<div class="blue1">
<h3>blue1</h3>
</div>
<div class="blue2">
<h3>blue2</h3>
</div>
</div>
<div class = "Yellow">
<h3>Yellow</h3>
</div>
<div class = "Green">
<h3>Green</h3>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Susy (v2.2.2)
// ----
@import "susy";
@import "breakpoint";
$susy: (
gutters: .0618,
container: 90%
);
$small: (
columns: 1, // 1 column
);
$medium: (
columns: 1 2 1, // 3 columns
container: 720px,
output: isolate,
);
$large: (
columns: 1 4 1 1, // 4 columns
container: 960px,
output: isolate,
);
$wide: (
columns: 1 6 1 1,
container: 1200px,
output: isolate,
);
@include layout($small); // I not sure why i must used this line of code. I did specify the $small breakpoint inside the dif's. any workaround without using this...
//Breakpoint size
$bp-small: 480px;
$bp-medium: 720px;
$bp-large: 960px;
$bp-wide: 1200px;
div {
box-sizing: border-box;
}
.container {
@include container;
@include susy-breakpoint($bp-small, $small) {
border: 1px;
border-color: greenyellow;
border-style: solid;
}
@include susy-breakpoint($bp-medium, $medium) {
border: 1px;
border-color: black;
border-style: solid;
}
@include susy-breakpoint($bp-large, $large) {
border: 1px;
border-color: red;
border-style: solid;
}
min-height: 96vh;
font-size: 2em;
div {
padding: .5em;
text-align: center;
}
}
.Plum {
background-color: plum;
border: 3px;
border-style: solid;
@include span(1 first);
@include susy-breakpoint($bp-small, $small) {
@include span(1 at 1);
border-color: pink;
}
@include susy-breakpoint($bp-medium, $medium) {
@include span(1 at 1);
border-color: blue;
}
@include susy-breakpoint($bp-large, $large) {
@include span(1 at 1);
border-color: orangered;
}
@include susy-breakpoint($bp-wide, $wide) {
@include span(1 at 1);
border-color: green;
}
}
.Blue {
background-color: lightblue;
border: 3px;
border-style: solid;
@include span(1 last);
@include susy-breakpoint($bp-small, $small) {
@include span(1 at 2);
border-color: pink;
}
@include susy-breakpoint($bp-medium, $medium) {
@include span(1 at 2);
border-color: blue;
}
@include susy-breakpoint($bp-large, $large) {
@include span(1 at 2);
border-color: orangered;
}
@include susy-breakpoint($bp-wide, $wide) {
@include span(1 at 2);
border-color: green;
}
}
.Yellow {
background-color: yellow;
border: 3px;
border-style: solid;
@include span(1 first);
@include susy-breakpoint($bp-small, $small) {
@include span(1 at 1);
border-color: pink;
}
@include susy-breakpoint($bp-medium, $medium) {
@include span(1 at 3);
border-color: blue;
}
@include susy-breakpoint($bp-large, $large) {
@include span(1 at 3);
border-color: orangered;
}
@include susy-breakpoint($bp-wide, $wide) {
@include span(1 at 3);
border-color: green;
}
}
.Green {
background-color: lightgreen;
border: 3px;
border-style: solid;
@include span(1 last);
@include susy-breakpoint($bp-small, $small) {
@include span(1 at 1);
border-color: pink;
}
@include susy-breakpoint($bp-medium, $medium) {
@include span(1 at 3);
border-color: blue;
clear: left;
}
@include susy-breakpoint($bp-large, $large) {
@include span(1 at 4);
border-color: orangered;
}
@include susy-breakpoint($bp-wide, $wide) {
@include span(1 at 4);
border-color: green;
}
}
.blue1 {
background-color: #71dad2;
@include span(3 wider of 6);
}
blue2{
background-color: lightcyan;
@include span(3 wider of 6 last);
}
Raw
SassMeister-output.css
div {
box-sizing: border-box;
}
.container {
max-width: 90%;
margin-left: auto;
margin-right: auto;
min-height: 96vh;
font-size: 2em;
}
.container:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 480px) {
.container {
border: 1px;
border-color: greenyellow;
border-style: solid;
}
}
@media (min-width: 720px) {
.container {
border: 1px;
border-color: black;
border-style: solid;
}
}
@media (min-width: 960px) {
.container {
border: 1px;
border-color: red;
border-style: solid;
}
}
.container div {
padding: .5em;
text-align: center;
}
.Plum {
background-color: plum;
border: 3px;
border-style: solid;
width: 100%;
float: left;
margin-right: 6.18%;
}
@media (min-width: 480px) {
.Plum {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
border-color: pink;
}
}
@media (min-width: 720px) {
.Plum {
width: 24.25065%;
float: left;
margin-left: 0;
margin-right: -100%;
border-color: blue;
}
}
@media (min-width: 960px) {
.Plum {
width: 13.91711%;
float: left;
margin-left: 0;
margin-right: -100%;
border-color: orangered;
}
}
@media (min-width: 1200px) {
.Plum {
width: 10.88684%;
float: left;
margin-left: 0;
margin-right: -100%;
border-color: green;
}
}
.Blue {
background-color: lightblue;
border: 3px;
border-style: solid;
width: 100%;
float: right;
margin-right: 0;
}
@media (min-width: 480px) {
.Blue {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
border-color: pink;
}
}
@media (min-width: 720px) {
.Blue {
width: 48.50131%;
float: left;
margin-left: 25.74935%;
margin-right: -100%;
border-color: blue;
}
}
@media (min-width: 960px) {
.Blue {
width: 55.66844%;
float: left;
margin-left: 14.77719%;
margin-right: -100%;
border-color: orangered;
}
}
@media (min-width: 1200px) {
.Blue {
width: 65.32105%;
float: left;
margin-left: 11.55965%;
margin-right: -100%;
border-color: green;
}
}
.Yellow {
background-color: yellow;
border: 3px;
border-style: solid;
width: 100%;
float: left;
margin-right: 6.18%;
}
@media (min-width: 480px) {
.Yellow {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
border-color: pink;
}
}
@media (min-width: 720px) {
.Yellow {
width: 24.25065%;
float: left;
margin-left: 75.74935%;
margin-right: -100%;
border-color: blue;
}
}
@media (min-width: 960px) {
.Yellow {
width: 13.91711%;
float: left;
margin-left: 71.3057%;
margin-right: -100%;
border-color: orangered;
}
}
@media (min-width: 1200px) {
.Yellow {
width: 10.88684%;
float: left;
margin-left: 77.55351%;
margin-right: -100%;
border-color: green;
}
}
.Green {
background-color: lightgreen;
border: 3px;
border-style: solid;
width: 100%;
float: right;
margin-right: 0;
}
@media (min-width: 480px) {
.Green {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
border-color: pink;
}
}
@media (min-width: 720px) {
.Green {
width: 24.25065%;
float: left;
margin-left: 75.74935%;
margin-right: -100%;
border-color: blue;
clear: left;
}
}
@media (min-width: 960px) {
.Green {
width: 13.91711%;
float: left;
margin-left: 86.08289%;
margin-right: -100%;
border-color: orangered;
}
}
@media (min-width: 1200px) {
.Green {
width: 10.88684%;
float: left;
margin-left: 89.11316%;
margin-right: -100%;
border-color: green;
}
}
.blue1 {
background-color: #71dad2;
width: 51.46933%;
float: left;
margin-right: 0.96073%;
}
blue2 {
background-color: lightcyan;
width: 51.46933%;
float: right;
margin-right: 0;
}
Raw
SassMeister-rendered.html
<div class = "container">
<div class = "Plum">
<h3>Plum</h3>
</div>
<div class = "Blue">
<h3>Blue</h3>
<div class="blue1">
<h3>blue1</h3>
</div>
<div class="blue2">
<h3>blue2</h3>
</div>
</div>
<div class = "Yellow">
<h3>Yellow</h3>
</div>
<div class = "Green">
<h3>Green</h3>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment