Skip to content

Instantly share code, notes, and snippets.

@caseydev

caseydev/SassMeister-input.scss

Forked from impressivewebs/SassMeister-input.scss
Created November 29, 2017 09:00
Show Gist options
  • Save caseydev/b4a6e84d68491d8e43a19d2769aebfad to your computer and use it in GitHub Desktop.
Save caseydev/b4a6e84d68491d8e43a19d2769aebfad to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @impressivewebs impressivewebs created this gist Mar 4, 2014.
    23 changes: 23 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    // ----
    // Sass (v3.3.0.rc.5)
    // Compass (v1.0.0.alpha.18)
    // ----

    @mixin theme($name, $color) {
    $primary: $color;
    $secondary: lighten(adjust-hue($color, 20), 10%);

    .#{$name} {
    .element {
    color: $primary;
    }

    .other-element {
    background: $secondary;
    }
    }
    }

    @include theme(theme-banana, yellow);
    @include theme(theme-blueberry, purple);
    @include theme(theme-cherry, red);
    20 changes: 20 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    .theme-banana .element {
    color: yellow;
    }
    .theme-banana .other-element {
    background: #bbff33;
    }

    .theme-blueberry .element {
    color: purple;
    }
    .theme-blueberry .other-element {
    background: #b30077;
    }

    .theme-cherry .element {
    color: red;
    }
    .theme-cherry .other-element {
    background: #ff7733;
    }