Skip to content

Instantly share code, notes, and snippets.

@csswizardry

csswizardry/SassMeister-input-HTML.html

Created February 25, 2016 10:06
Show Gist options
  • Save csswizardry/37b8e31eba71b1b5ab59 to your computer and use it in GitHub Desktop.
Save csswizardry/37b8e31eba71b1b5ab59 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. csswizardry created this gist Feb 25, 2016.
    2 changes: 2 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <div style="width: 2pc; height: 2pc; background: red;"></div>
    <div style="width: 32px; height: 32px; background: red;"></div>
    4 changes: 4 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    // ----
    // libsass (v3.2.5)
    // ----

    228 changes: 228 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,228 @@
    /*------------------------------------* #LAYOUT
    \*------------------------------------*/
    .o-layout {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: -24px;
    }

    .o-layout__item {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding-left: 24px;
    }

    /*------------------------------------* #WIDTHS
    \*------------------------------------*/
    /**
    * A series of width helper classes that you can use to size things like grid
    * systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken-
    * word format (e.g. `.u-2-of-3`). Use these in your markup:
    *
    * <div class="u-7/12">
    */
    .u-1\/1 {
    width: 100% !important;
    }

    .u-1\/2 {
    width: 50% !important;
    }

    .u-2\/2 {
    width: 100% !important;
    }

    .u-1\/3 {
    width: 33.33333% !important;
    }

    .u-2\/3 {
    width: 66.66667% !important;
    }

    .u-3\/3 {
    width: 100% !important;
    }

    .u-1\/4 {
    width: 25% !important;
    }

    .u-2\/4 {
    width: 50% !important;
    }

    .u-3\/4 {
    width: 75% !important;
    }

    .u-4\/4 {
    width: 100% !important;
    }

    .u-1\/5 {
    width: 20% !important;
    }

    .u-2\/5 {
    width: 40% !important;
    }

    .u-3\/5 {
    width: 60% !important;
    }

    .u-4\/5 {
    width: 80% !important;
    }

    .u-5\/5 {
    width: 100% !important;
    }

    @media screen and (min-width: 720px) {
    .u-1\/1\@sm {
    width: 100% !important;
    }
    .u-1\/2\@sm {
    width: 50% !important;
    }
    .u-2\/2\@sm {
    width: 100% !important;
    }
    .u-1\/3\@sm {
    width: 33.33333% !important;
    }
    .u-2\/3\@sm {
    width: 66.66667% !important;
    }
    .u-3\/3\@sm {
    width: 100% !important;
    }
    .u-1\/4\@sm {
    width: 25% !important;
    }
    .u-2\/4\@sm {
    width: 50% !important;
    }
    .u-3\/4\@sm {
    width: 75% !important;
    }
    .u-4\/4\@sm {
    width: 100% !important;
    }
    .u-1\/5\@sm {
    width: 20% !important;
    }
    .u-2\/5\@sm {
    width: 40% !important;
    }
    .u-3\/5\@sm {
    width: 60% !important;
    }
    .u-4\/5\@sm {
    width: 80% !important;
    }
    .u-5\/5\@sm {
    width: 100% !important;
    }
    }

    @media screen and (min-width: 1024px) {
    .u-1\/1\@md {
    width: 100% !important;
    }
    .u-1\/2\@md {
    width: 50% !important;
    }
    .u-2\/2\@md {
    width: 100% !important;
    }
    .u-1\/3\@md {
    width: 33.33333% !important;
    }
    .u-2\/3\@md {
    width: 66.66667% !important;
    }
    .u-3\/3\@md {
    width: 100% !important;
    }
    .u-1\/4\@md {
    width: 25% !important;
    }
    .u-2\/4\@md {
    width: 50% !important;
    }
    .u-3\/4\@md {
    width: 75% !important;
    }
    .u-4\/4\@md {
    width: 100% !important;
    }
    .u-1\/5\@md {
    width: 20% !important;
    }
    .u-2\/5\@md {
    width: 40% !important;
    }
    .u-3\/5\@md {
    width: 60% !important;
    }
    .u-4\/5\@md {
    width: 80% !important;
    }
    .u-5\/5\@md {
    width: 100% !important;
    }
    }

    @media screen and (min-width: 1200px) {
    .u-1\/1\@lg {
    width: 100% !important;
    }
    .u-1\/2\@lg {
    width: 50% !important;
    }
    .u-2\/2\@lg {
    width: 100% !important;
    }
    .u-1\/3\@lg {
    width: 33.33333% !important;
    }
    .u-2\/3\@lg {
    width: 66.66667% !important;
    }
    .u-3\/3\@lg {
    width: 100% !important;
    }
    .u-1\/4\@lg {
    width: 25% !important;
    }
    .u-2\/4\@lg {
    width: 50% !important;
    }
    .u-3\/4\@lg {
    width: 75% !important;
    }
    .u-4\/4\@lg {
    width: 100% !important;
    }
    .u-1\/5\@lg {
    width: 20% !important;
    }
    .u-2\/5\@lg {
    width: 40% !important;
    }
    .u-3\/5\@lg {
    width: 60% !important;
    }
    .u-4\/5\@lg {
    width: 80% !important;
    }
    .u-5\/5\@lg {
    width: 100% !important;
    }
    }
    2 changes: 2 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <div style="width: 2pc; height: 2pc; background: red;"></div>
    <div style="width: 32px; height: 32px; background: red;"></div>