Skip to content

Instantly share code, notes, and snippets.

@SebConejo

SebConejo/SassMeister-input-HTML.html

Created May 8, 2015 15:19
Show Gist options
  • Save SebConejo/7d9708a012f2ea8e2a1c to your computer and use it in GitHub Desktop.
Save SebConejo/7d9708a012f2ea8e2a1c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. SebConejo created this gist May 8, 2015.
    15 changes: 15 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    <div class="message error">
    <p>
    Message error
    </p>
    </div>
    <div class="message warning">
    <p>
    warning message
    </p>
    </div>
    <div class="message status">
    <p>
    status message
    </p>
    </div>
    36 changes: 36 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    // ----
    // libsass (v3.2.0-beta.6)
    // ----

    $message: (
    status: (
    background: #d5edf8,
    border: #92cae4,
    color: #205791,
    ),
    warning: (
    background: #fff6bf,
    border: #ffd324,
    color: #514721,
    ),
    error: (
    background: #fbe3e4,
    border: #fbc2c4,
    color: #8a1f11,
    ),
    ) !default;

    .message {
    border: 1px transparent solid;
    padding: 1em .5em;
    margin-bottom: 1em;
    @each $msg in $message {
    $_typ: nth($msg, 1);
    $_value: nth($msg, 2);
    &.#{$_typ} {
    background: map-get($_value, background);
    border-color: map-get($_value, border);
    color: map-get($_value, color);
    }
    }
    }
    23 changes: 23 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    .message {
    border: 1px transparent solid;
    padding: 1em 0.5em;
    margin-bottom: 1em;
    }

    .message.status {
    background: #d5edf8;
    border-color: #92cae4;
    color: #205791;
    }

    .message.warning {
    background: #fff6bf;
    border-color: #ffd324;
    color: #514721;
    }

    .message.error {
    background: #fbe3e4;
    border-color: #fbc2c4;
    color: #8a1f11;
    }
    15 changes: 15 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    <div class="message error">
    <p>
    Message error
    </p>
    </div>
    <div class="message warning">
    <p>
    warning message
    </p>
    </div>
    <div class="message status">
    <p>
    status message
    </p>
    </div>