Skip to content

Instantly share code, notes, and snippets.

@timhettler

timhettler/SassMeister-input-HTML.html

Last active November 3, 2015 20:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save timhettler/6802d138df7a84eb6280 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save timhettler/6802d138df7a84eb6280 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. timhettler revised this gist Nov 3, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,8 @@
    // libsass (v3.2.5)
    // ----

    @mixin fpo($size: 100%, $bg-color: slategray, $color: #fff, $text: 'FPO') {
    background-color: $bg-color;
    @mixin fpo($size: 100%, $color--bg: slategray, $color--text: #fff, $text: 'FPO') {
    background-color: $color--bg;
    position: relative;

    &:before {
    @@ -14,7 +14,7 @@

    &:after {
    content: $text;
    color: $color;
    color: $color--text;
    font: 20px/1 Helvetica;
    position: absolute;
    top: 50%;
  2. timhettler revised this gist Oct 23, 2015. 2 changed files with 4 additions and 4 deletions.
    6 changes: 3 additions & 3 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    // libsass (v3.2.5)
    // ----

    @mixin fpo($size: 100%, $bg-color: slategray) {
    @mixin fpo($size: 100%, $bg-color: slategray, $color: #fff, $text: 'FPO') {
    background-color: $bg-color;
    position: relative;

    @@ -13,8 +13,8 @@
    }

    &:after {
    content: 'FPO';
    color: #fff;
    content: $text;
    color: $color;
    font: 20px/1 Helvetica;
    position: absolute;
    top: 50%;
    2 changes: 1 addition & 1 deletion SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@
    }

    .fpo:after {
    content: 'FPO';
    content: "FPO";
    color: #fff;
    font: 20px/1 Helvetica;
    position: absolute;
  3. timhettler revised this gist Oct 23, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,8 @@
    // libsass (v3.2.5)
    // ----

    @mixin fpo($size: 100%, $color: slategray) {
    background-color: $color;
    @mixin fpo($size: 100%, $bg-color: slategray) {
    background-color: $bg-color;
    position: relative;

    &:before {
  4. timhettler created this gist Oct 23, 2015.
    5 changes: 5 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="container">
    <div class="fpo"></div>
    <div class="fpo"></div>
    <div class="fpo"></div>
    </div>
    35 changes: 35 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    // ----
    // libsass (v3.2.5)
    // ----

    @mixin fpo($size: 100%, $color: slategray) {
    background-color: $color;
    position: relative;

    &:before {
    content: '';
    display: block;
    padding-bottom: $size;
    }

    &:after {
    content: 'FPO';
    color: #fff;
    font: 20px/1 Helvetica;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    }

    .fpo {
    @include fpo(66%, tomato);
    width: 20%;
    }

    .container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    }
    27 changes: 27 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    .fpo {
    background-color: tomato;
    position: relative;
    width: 20%;
    }

    .fpo:before {
    content: '';
    display: block;
    padding-bottom: 66%;
    }

    .fpo:after {
    content: 'FPO';
    color: #fff;
    font: 20px/1 Helvetica;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    .container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    }
    5 changes: 5 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="container">
    <div class="fpo"></div>
    <div class="fpo"></div>
    <div class="fpo"></div>
    </div>