Skip to content

Instantly share code, notes, and snippets.

@owzim

owzim/input.scss

Created November 2, 2020 14:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save owzim/7434a84476a30930e45387681d5caeab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save owzim/7434a84476a30930e45387681d5caeab to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. owzim created this gist Nov 2, 2020.
    38 changes: 38 additions & 0 deletions input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    $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;
    }
    }
    }
    }

    @function grid-width($col, $count) {

    @if $col == $count {
    @return 100%;
    } @else {
    $precision: 10000;
    @return round(100% / $count * $precision) / $precision * $col;
    }
    }

    @for $count from 2 through 6 {
    @for $index from 1 through $count {
    @include resputil("col#{$index}of#{$count}") {
    width: grid-width($index, $count);
    }
    }
    }
    439 changes: 439 additions & 0 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,439 @@
    .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.6666%;
    }

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

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

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

    .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.3334%;
    }

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

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

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

    .col3of6 {
    width: 50.0001%;
    }

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

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

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

    .col4of6 {
    width: 66.6668%;
    }

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

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

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

    .col5of6 {
    width: 83.3335%;
    }

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

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

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

    .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%;
    }
    }
    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
    }