Skip to content

Instantly share code, notes, and snippets.

@nixstrom

nixstrom/SassMeister-input-HTML.html

Created June 17, 2015 09:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nixstrom/d5a81de58beda5aec53e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nixstrom/d5a81de58beda5aec53e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nixstrom created this gist Jun 17, 2015.
    6 changes: 6 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </main>
    24 changes: 24 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    // ----
    // Sass (v3.4.14)
    // Compass (v1.0.3)
    // ----

    main {
    background: lightblue;
    display: flex;
    margin: 0 auto;
    overflow: hidden;
    flex-flow: row wrap;
    width: 800px;
    }

    div {
    background: darkgreen;
    flex: {
    basis: calc(25% - 2rem);
    grow: 1;
    shrink: 0;
    };
    height: 100px;
    margin: 1rem;
    }
    17 changes: 17 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    main {
    background: lightblue;
    display: flex;
    margin: 0 auto;
    overflow: hidden;
    flex-flow: row wrap;
    width: 800px;
    }

    div {
    background: darkgreen;
    flex-basis: calc(25% - 2rem);
    flex-grow: 1;
    flex-shrink: 0;
    height: 100px;
    margin: 1rem;
    }
    6 changes: 6 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </main>