Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.5)
// Compass (v1.0.1)
// ----
$settings: (
maxWidth: 800px,
columns: 12,
margin: 15px,
breakpoints: (
xs: "(max-width : 480px)",
sm: "(max-width : 768px) and (min-width: 481px)",
md: "(max-width : 1024px) and (min-width: 769px)",
lg: "(min-width : 1025px)"
)
);
@mixin renderGridStyles($settings){
.container {
padding-right: map-get($settings, "margin");
padding-left: map-get($settings, "margin");
margin-right: auto;
margin-left: auto;
max-width: map-get($settings,"maxWidth");
}
.row {
margin-right: map-get($settings, "margin") * -1;
margin-left: map-get($settings, "margin") * -1;
}
$breakpoints: map-get($settings, "breakpoints");
@each $key, $breakpoint in $breakpoints {
@include media($breakpoint) {
@include renderGrid($key, $settings);
}
}
}
@mixin renderGrid($key, $settings) {
$i: 1;
@while $i <= map-get($settings, "columns") {
.col-#{$key}-#{$i} {
float: left;
width: 100% * $i / map-get($settings,"columns");
}
$i: $i+1;
}
}
@mixin media($queryString){
@media #{$queryString} {
@content;
}
}
@include renderGridStyles($settings);
p {
padding: 20px;
color: white;
background: #9b59b6;
margin: 20px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 800px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
@media (max-width: 480px) {
.col-xs-1 {
float: left;
width: 8.33333%;
}
.col-xs-2 {
float: left;
width: 16.66667%;
}
.col-xs-3 {
float: left;
width: 25%;
}
.col-xs-4 {
float: left;
width: 33.33333%;
}
.col-xs-5 {
float: left;
width: 41.66667%;
}
.col-xs-6 {
float: left;
width: 50%;
}
.col-xs-7 {
float: left;
width: 58.33333%;
}
.col-xs-8 {
float: left;
width: 66.66667%;
}
.col-xs-9 {
float: left;
width: 75%;
}
.col-xs-10 {
float: left;
width: 83.33333%;
}
.col-xs-11 {
float: left;
width: 91.66667%;
}
.col-xs-12 {
float: left;
width: 100%;
}
}
@media (max-width: 768px) and (min-width: 481px) {
.col-sm-1 {
float: left;
width: 8.33333%;
}
.col-sm-2 {
float: left;
width: 16.66667%;
}
.col-sm-3 {
float: left;
width: 25%;
}
.col-sm-4 {
float: left;
width: 33.33333%;
}
.col-sm-5 {
float: left;
width: 41.66667%;
}
.col-sm-6 {
float: left;
width: 50%;
}
.col-sm-7 {
float: left;
width: 58.33333%;
}
.col-sm-8 {
float: left;
width: 66.66667%;
}
.col-sm-9 {
float: left;
width: 75%;
}
.col-sm-10 {
float: left;
width: 83.33333%;
}
.col-sm-11 {
float: left;
width: 91.66667%;
}
.col-sm-12 {
float: left;
width: 100%;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.col-md-1 {
float: left;
width: 8.33333%;
}
.col-md-2 {
float: left;
width: 16.66667%;
}
.col-md-3 {
float: left;
width: 25%;
}
.col-md-4 {
float: left;
width: 33.33333%;
}
.col-md-5 {
float: left;
width: 41.66667%;
}
.col-md-6 {
float: left;
width: 50%;
}
.col-md-7 {
float: left;
width: 58.33333%;
}
.col-md-8 {
float: left;
width: 66.66667%;
}
.col-md-9 {
float: left;
width: 75%;
}
.col-md-10 {
float: left;
width: 83.33333%;
}
.col-md-11 {
float: left;
width: 91.66667%;
}
.col-md-12 {
float: left;
width: 100%;
}
}
@media (min-width: 1025px) {
.col-lg-1 {
float: left;
width: 8.33333%;
}
.col-lg-2 {
float: left;
width: 16.66667%;
}
.col-lg-3 {
float: left;
width: 25%;
}
.col-lg-4 {
float: left;
width: 33.33333%;
}
.col-lg-5 {
float: left;
width: 41.66667%;
}
.col-lg-6 {
float: left;
width: 50%;
}
.col-lg-7 {
float: left;
width: 58.33333%;
}
.col-lg-8 {
float: left;
width: 66.66667%;
}
.col-lg-9 {
float: left;
width: 75%;
}
.col-lg-10 {
float: left;
width: 83.33333%;
}
.col-lg-11 {
float: left;
width: 91.66667%;
}
.col-lg-12 {
float: left;
width: 100%;
}
}
p {
padding: 20px;
color: white;
background: #9b59b6;
margin: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.