jdsteinbach
3/20/2015 - 3:56 PM

Generated by SassMeister.com.

Generated by SassMeister.com.

SassMeister-rendered.html
content_copyfile_download
<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>
SassMeister-output.css
content_copyfile_download
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: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 480px) {
  .blue1 {
    width: 48.50131%;
    float: left;
    margin-right: 2.99738%;
  }
}

blue2 {
  background-color: lightcyan;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 480px) {
  blue2 {
    width: 48.50131%;
    float: left;
    margin-right: 2.99738%;
  }
}
SassMeister-input.scss
content_copyfile_download
// ----
// 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);
        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(1);
  @include susy-breakpoint($bp-small, $small) {
      @include span(1 of 2 first);
  }
  @include susy-breakpoint($bp-medium, $medium) {
      //@include span(1 at 1);
  }
}

blue2{
  background-color: lightcyan;
 
  @include span(1);
  @include susy-breakpoint($bp-small, $small) {
      @include span(1 of 2 last);
  }
  @include susy-breakpoint($bp-medium, $medium) {
     // @include span(1 at 2);
  }
}
SassMeister-input-HTML.html
content_copyfile_download
<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>