Skip to content

Instantly share code, notes, and snippets.

@owzim

owzim/input.scss

Last active November 2, 2020 15:51
Show Gist options
  • Save owzim/effb22fa1df8b0ee6c46cb87c5902c06 to your computer and use it in GitHub Desktop.
Save owzim/effb22fa1df8b0ee6c46cb87c5902c06 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. owzim revised this gist Nov 2, 2020. No changes.
  2. owzim revised this gist Nov 2, 2020. No changes.
  3. owzim created this gist Nov 2, 2020.
    31 changes: 31 additions & 0 deletions input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    $resputil-breakpoints: (
    xs: 480px,
    sm: 768px,
    md: 992px,
    lg: 1200px,
    xl: 1600px,
    ) !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;
    }
    }
    }
    679 changes: 679 additions & 0 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,679 @@
    .col1of2 {
    width: 50%;
    }

    @media (min-width: 480px) {
    .xs\:col1of2 {
    width: 50%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col1of2 {
    width: 50%;
    }
    }

    @media (min-width: 992px) {
    .md\:col1of2 {
    width: 50%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col1of2 {
    width: 50%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col1of2 {
    width: 50%;
    }
    }

    .col2of2 {
    width: 100%;
    }

    @media (min-width: 480px) {
    .xs\:col2of2 {
    width: 100%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col2of2 {
    width: 100%;
    }
    }

    @media (min-width: 992px) {
    .md\:col2of2 {
    width: 100%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col2of2 {
    width: 100%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col2of2 {
    width: 100%;
    }
    }

    .col1of3 {
    width: 33.3333%;
    }

    @media (min-width: 480px) {
    .xs\:col1of3 {
    width: 33.3333%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col1of3 {
    width: 33.3333%;
    }
    }

    @media (min-width: 992px) {
    .md\:col1of3 {
    width: 33.3333%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col1of3 {
    width: 33.3333%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col1of3 {
    width: 33.3333%;
    }
    }

    .col2of3 {
    width: 66.6667%;
    }

    @media (min-width: 480px) {
    .xs\:col2of3 {
    width: 66.6667%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col2of3 {
    width: 66.6667%;
    }
    }

    @media (min-width: 992px) {
    .md\:col2of3 {
    width: 66.6667%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col2of3 {
    width: 66.6667%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col2of3 {
    width: 66.6667%;
    }
    }

    .col3of3 {
    width: 100%;
    }

    @media (min-width: 480px) {
    .xs\:col3of3 {
    width: 100%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col3of3 {
    width: 100%;
    }
    }

    @media (min-width: 992px) {
    .md\:col3of3 {
    width: 100%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col3of3 {
    width: 100%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col3of3 {
    width: 100%;
    }
    }

    .col1of4 {
    width: 25%;
    }

    @media (min-width: 480px) {
    .xs\:col1of4 {
    width: 25%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col1of4 {
    width: 25%;
    }
    }

    @media (min-width: 992px) {
    .md\:col1of4 {
    width: 25%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col1of4 {
    width: 25%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col1of4 {
    width: 25%;
    }
    }

    .col2of4 {
    width: 50%;
    }

    @media (min-width: 480px) {
    .xs\:col2of4 {
    width: 50%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col2of4 {
    width: 50%;
    }
    }

    @media (min-width: 992px) {
    .md\:col2of4 {
    width: 50%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col2of4 {
    width: 50%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col2of4 {
    width: 50%;
    }
    }

    .col3of4 {
    width: 75%;
    }

    @media (min-width: 480px) {
    .xs\:col3of4 {
    width: 75%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col3of4 {
    width: 75%;
    }
    }

    @media (min-width: 992px) {
    .md\:col3of4 {
    width: 75%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col3of4 {
    width: 75%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col3of4 {
    width: 75%;
    }
    }

    .col4of4 {
    width: 100%;
    }

    @media (min-width: 480px) {
    .xs\:col4of4 {
    width: 100%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col4of4 {
    width: 100%;
    }
    }

    @media (min-width: 992px) {
    .md\:col4of4 {
    width: 100%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col4of4 {
    width: 100%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col4of4 {
    width: 100%;
    }
    }

    .col1of5 {
    width: 20%;
    }

    @media (min-width: 480px) {
    .xs\:col1of5 {
    width: 20%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col1of5 {
    width: 20%;
    }
    }

    @media (min-width: 992px) {
    .md\:col1of5 {
    width: 20%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col1of5 {
    width: 20%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col1of5 {
    width: 20%;
    }
    }

    .col2of5 {
    width: 40%;
    }

    @media (min-width: 480px) {
    .xs\:col2of5 {
    width: 40%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col2of5 {
    width: 40%;
    }
    }

    @media (min-width: 992px) {
    .md\:col2of5 {
    width: 40%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col2of5 {
    width: 40%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col2of5 {
    width: 40%;
    }
    }

    .col3of5 {
    width: 60%;
    }

    @media (min-width: 480px) {
    .xs\:col3of5 {
    width: 60%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col3of5 {
    width: 60%;
    }
    }

    @media (min-width: 992px) {
    .md\:col3of5 {
    width: 60%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col3of5 {
    width: 60%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col3of5 {
    width: 60%;
    }
    }

    .col4of5 {
    width: 80%;
    }

    @media (min-width: 480px) {
    .xs\:col4of5 {
    width: 80%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col4of5 {
    width: 80%;
    }
    }

    @media (min-width: 992px) {
    .md\:col4of5 {
    width: 80%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col4of5 {
    width: 80%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col4of5 {
    width: 80%;
    }
    }

    .col5of5 {
    width: 100%;
    }

    @media (min-width: 480px) {
    .xs\:col5of5 {
    width: 100%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col5of5 {
    width: 100%;
    }
    }

    @media (min-width: 992px) {
    .md\:col5of5 {
    width: 100%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col5of5 {
    width: 100%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col5of5 {
    width: 100%;
    }
    }

    .col1of6 {
    width: 16.6667%;
    }

    @media (min-width: 480px) {
    .xs\:col1of6 {
    width: 16.6667%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col1of6 {
    width: 16.6667%;
    }
    }

    @media (min-width: 992px) {
    .md\:col1of6 {
    width: 16.6667%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col1of6 {
    width: 16.6667%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col1of6 {
    width: 16.6667%;
    }
    }

    .col2of6 {
    width: 33.3333%;
    }

    @media (min-width: 480px) {
    .xs\:col2of6 {
    width: 33.3333%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col2of6 {
    width: 33.3333%;
    }
    }

    @media (min-width: 992px) {
    .md\:col2of6 {
    width: 33.3333%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col2of6 {
    width: 33.3333%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col2of6 {
    width: 33.3333%;
    }
    }

    .col3of6 {
    width: 50%;
    }

    @media (min-width: 480px) {
    .xs\:col3of6 {
    width: 50%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col3of6 {
    width: 50%;
    }
    }

    @media (min-width: 992px) {
    .md\:col3of6 {
    width: 50%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col3of6 {
    width: 50%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col3of6 {
    width: 50%;
    }
    }

    .col4of6 {
    width: 66.6667%;
    }

    @media (min-width: 480px) {
    .xs\:col4of6 {
    width: 66.6667%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col4of6 {
    width: 66.6667%;
    }
    }

    @media (min-width: 992px) {
    .md\:col4of6 {
    width: 66.6667%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col4of6 {
    width: 66.6667%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col4of6 {
    width: 66.6667%;
    }
    }

    .col5of6 {
    width: 83.3333%;
    }

    @media (min-width: 480px) {
    .xs\:col5of6 {
    width: 83.3333%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col5of6 {
    width: 83.3333%;
    }
    }

    @media (min-width: 992px) {
    .md\:col5of6 {
    width: 83.3333%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col5of6 {
    width: 83.3333%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col5of6 {
    width: 83.3333%;
    }
    }

    .col6of6 {
    width: 100%;
    }

    @media (min-width: 480px) {
    .xs\:col6of6 {
    width: 100%;
    }
    }

    @media (min-width: 768px) {
    .sm\:col6of6 {
    width: 100%;
    }
    }

    @media (min-width: 992px) {
    .md\:col6of6 {
    width: 100%;
    }
    }

    @media (min-width: 1200px) {
    .lg\:col6of6 {
    width: 100%;
    }
    }

    @media (min-width: 1600px) {
    .xl\:col6of6 {
    width: 100%;
    }
    }
    9 changes: 9 additions & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    {
    "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
    },
    "autoprefixer": false
    }