Skip to content

Instantly share code, notes, and snippets.

@owzim

owzim/input.scss

Created November 2, 2020 14:45
Show Gist options
  • Save owzim/1ccd885b55c6b93752bfb2746f861cb3 to your computer and use it in GitHub Desktop.
Save owzim/1ccd885b55c6b93752bfb2746f861cb3 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
$resputil-breakpoints: (
sm: 640px,
md: 760px,
lg: 1024px,
) !default;
@mixin resputil($name, $breakpoints: $resputil-breakpoints) {
.#{$name} {
@content;
}
@each $bp-name, $bp-value in $breakpoints {
.#{$bp-name}\:#{$name} {
@media (min-width: $bp-value) {
@content;
}
}
}
}
@for $count from 2 through 6 {
@for $cols from 1 through $count {
@include resputil("col#{$cols}of#{$count}") {
$precision: 10000;
width: round($cols / $count * 100% * $precision) / $precision;
}
}
}
Raw
output.css
.col1of2 {
width: 50%;
}
@media (min-width: 640px) {
.sm\:col1of2 {
width: 50%;
}
}
@media (min-width: 760px) {
.md\:col1of2 {
width: 50%;
}
}
@media (min-width: 1024px) {
.lg\:col1of2 {
width: 50%;
}
}
.col2of2 {
width: 100%;
}
@media (min-width: 640px) {
.sm\:col2of2 {
width: 100%;
}
}
@media (min-width: 760px) {
.md\:col2of2 {
width: 100%;
}
}
@media (min-width: 1024px) {
.lg\:col2of2 {
width: 100%;
}
}
.col1of3 {
width: 33.3333%;
}
@media (min-width: 640px) {
.sm\:col1of3 {
width: 33.3333%;
}
}
@media (min-width: 760px) {
.md\:col1of3 {
width: 33.3333%;
}
}
@media (min-width: 1024px) {
.lg\:col1of3 {
width: 33.3333%;
}
}
.col2of3 {
width: 66.6667%;
}
@media (min-width: 640px) {
.sm\:col2of3 {
width: 66.6667%;
}
}
@media (min-width: 760px) {
.md\:col2of3 {
width: 66.6667%;
}
}
@media (min-width: 1024px) {
.lg\:col2of3 {
width: 66.6667%;
}
}
.col3of3 {
width: 100%;
}
@media (min-width: 640px) {
.sm\:col3of3 {
width: 100%;
}
}
@media (min-width: 760px) {
.md\:col3of3 {
width: 100%;
}
}
@media (min-width: 1024px) {
.lg\:col3of3 {
width: 100%;
}
}
.col1of4 {
width: 25%;
}
@media (min-width: 640px) {
.sm\:col1of4 {
width: 25%;
}
}
@media (min-width: 760px) {
.md\:col1of4 {
width: 25%;
}
}
@media (min-width: 1024px) {
.lg\:col1of4 {
width: 25%;
}
}
.col2of4 {
width: 50%;
}
@media (min-width: 640px) {
.sm\:col2of4 {
width: 50%;
}
}
@media (min-width: 760px) {
.md\:col2of4 {
width: 50%;
}
}
@media (min-width: 1024px) {
.lg\:col2of4 {
width: 50%;
}
}
.col3of4 {
width: 75%;
}
@media (min-width: 640px) {
.sm\:col3of4 {
width: 75%;
}
}
@media (min-width: 760px) {
.md\:col3of4 {
width: 75%;
}
}
@media (min-width: 1024px) {
.lg\:col3of4 {
width: 75%;
}
}
.col4of4 {
width: 100%;
}
@media (min-width: 640px) {
.sm\:col4of4 {
width: 100%;
}
}
@media (min-width: 760px) {
.md\:col4of4 {
width: 100%;
}
}
@media (min-width: 1024px) {
.lg\:col4of4 {
width: 100%;
}
}
.col1of5 {
width: 20%;
}
@media (min-width: 640px) {
.sm\:col1of5 {
width: 20%;
}
}
@media (min-width: 760px) {
.md\:col1of5 {
width: 20%;
}
}
@media (min-width: 1024px) {
.lg\:col1of5 {
width: 20%;
}
}
.col2of5 {
width: 40%;
}
@media (min-width: 640px) {
.sm\:col2of5 {
width: 40%;
}
}
@media (min-width: 760px) {
.md\:col2of5 {
width: 40%;
}
}
@media (min-width: 1024px) {
.lg\:col2of5 {
width: 40%;
}
}
.col3of5 {
width: 60%;
}
@media (min-width: 640px) {
.sm\:col3of5 {
width: 60%;
}
}
@media (min-width: 760px) {
.md\:col3of5 {
width: 60%;
}
}
@media (min-width: 1024px) {
.lg\:col3of5 {
width: 60%;
}
}
.col4of5 {
width: 80%;
}
@media (min-width: 640px) {
.sm\:col4of5 {
width: 80%;
}
}
@media (min-width: 760px) {
.md\:col4of5 {
width: 80%;
}
}
@media (min-width: 1024px) {
.lg\:col4of5 {
width: 80%;
}
}
.col5of5 {
width: 100%;
}
@media (min-width: 640px) {
.sm\:col5of5 {
width: 100%;
}
}
@media (min-width: 760px) {
.md\:col5of5 {
width: 100%;
}
}
@media (min-width: 1024px) {
.lg\:col5of5 {
width: 100%;
}
}
.col1of6 {
width: 16.6667%;
}
@media (min-width: 640px) {
.sm\:col1of6 {
width: 16.6667%;
}
}
@media (min-width: 760px) {
.md\:col1of6 {
width: 16.6667%;
}
}
@media (min-width: 1024px) {
.lg\:col1of6 {
width: 16.6667%;
}
}
.col2of6 {
width: 33.3333%;
}
@media (min-width: 640px) {
.sm\:col2of6 {
width: 33.3333%;
}
}
@media (min-width: 760px) {
.md\:col2of6 {
width: 33.3333%;
}
}
@media (min-width: 1024px) {
.lg\:col2of6 {
width: 33.3333%;
}
}
.col3of6 {
width: 50%;
}
@media (min-width: 640px) {
.sm\:col3of6 {
width: 50%;
}
}
@media (min-width: 760px) {
.md\:col3of6 {
width: 50%;
}
}
@media (min-width: 1024px) {
.lg\:col3of6 {
width: 50%;
}
}
.col4of6 {
width: 66.6667%;
}
@media (min-width: 640px) {
.sm\:col4of6 {
width: 66.6667%;
}
}
@media (min-width: 760px) {
.md\:col4of6 {
width: 66.6667%;
}
}
@media (min-width: 1024px) {
.lg\:col4of6 {
width: 66.6667%;
}
}
.col5of6 {
width: 83.3333%;
}
@media (min-width: 640px) {
.sm\:col5of6 {
width: 83.3333%;
}
}
@media (min-width: 760px) {
.md\:col5of6 {
width: 83.3333%;
}
}
@media (min-width: 1024px) {
.lg\:col5of6 {
width: 83.3333%;
}
}
.col6of6 {
width: 100%;
}
@media (min-width: 640px) {
.sm\:col6of6 {
width: 100%;
}
}
@media (min-width: 760px) {
.md\:col6of6 {
width: 100%;
}
}
@media (min-width: 1024px) {
.lg\:col6of6 {
width: 100%;
}
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment