Skip to content

Instantly share code, notes, and snippets.

@glebkema
Created July 3, 2020 14:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save glebkema/06501bc196aa48d4639fcba628a0fee9 to your computer and use it in GitHub Desktop.
Save glebkema/06501bc196aa48d4639fcba628a0fee9 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.5.6)
// Compass (vundefined)
// ----
$queries: (
( 'xs', 400, 4 ),
( 'sm', 550, 6 ),
( 'md', 750, 8 ),
( 'lg', 1000, 10 ),
( 'xl', 1200, 12 )
);
@each $prefix, $media, $columns in $queries {
@media screen and ( min-width: $media + px) {
@for $i from 1 through $columns {
.col-#{$prefix}-#{$i} {
flex: 0 0 100% / $columns * $i
}
}
}
}
@media screen and (min-width: 400px) {
.col-xs-1 {
flex: 0 0 25%;
}
.col-xs-2 {
flex: 0 0 50%;
}
.col-xs-3 {
flex: 0 0 75%;
}
.col-xs-4 {
flex: 0 0 100%;
}
}
@media screen and (min-width: 550px) {
.col-sm-1 {
flex: 0 0 16.6666666667%;
}
.col-sm-2 {
flex: 0 0 33.3333333333%;
}
.col-sm-3 {
flex: 0 0 50%;
}
.col-sm-4 {
flex: 0 0 66.6666666667%;
}
.col-sm-5 {
flex: 0 0 83.3333333333%;
}
.col-sm-6 {
flex: 0 0 100%;
}
}
@media screen and (min-width: 750px) {
.col-md-1 {
flex: 0 0 12.5%;
}
.col-md-2 {
flex: 0 0 25%;
}
.col-md-3 {
flex: 0 0 37.5%;
}
.col-md-4 {
flex: 0 0 50%;
}
.col-md-5 {
flex: 0 0 62.5%;
}
.col-md-6 {
flex: 0 0 75%;
}
.col-md-7 {
flex: 0 0 87.5%;
}
.col-md-8 {
flex: 0 0 100%;
}
}
@media screen and (min-width: 1000px) {
.col-lg-1 {
flex: 0 0 10%;
}
.col-lg-2 {
flex: 0 0 20%;
}
.col-lg-3 {
flex: 0 0 30%;
}
.col-lg-4 {
flex: 0 0 40%;
}
.col-lg-5 {
flex: 0 0 50%;
}
.col-lg-6 {
flex: 0 0 60%;
}
.col-lg-7 {
flex: 0 0 70%;
}
.col-lg-8 {
flex: 0 0 80%;
}
.col-lg-9 {
flex: 0 0 90%;
}
.col-lg-10 {
flex: 0 0 100%;
}
}
@media screen and (min-width: 1200px) {
.col-xl-1 {
flex: 0 0 8.3333333333%;
}
.col-xl-2 {
flex: 0 0 16.6666666667%;
}
.col-xl-3 {
flex: 0 0 25%;
}
.col-xl-4 {
flex: 0 0 33.3333333333%;
}
.col-xl-5 {
flex: 0 0 41.6666666667%;
}
.col-xl-6 {
flex: 0 0 50%;
}
.col-xl-7 {
flex: 0 0 58.3333333333%;
}
.col-xl-8 {
flex: 0 0 66.6666666667%;
}
.col-xl-9 {
flex: 0 0 75%;
}
.col-xl-10 {
flex: 0 0 83.3333333333%;
}
.col-xl-11 {
flex: 0 0 91.6666666667%;
}
.col-xl-12 {
flex: 0 0 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment