Skip to content

Instantly share code, notes, and snippets.

@wingrunr21

wingrunr21/SassMeister-input.scss

Created October 1, 2014 19:18
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. wingrunr21 created this gist Oct 1, 2014.
    37 changes: 37 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    // ----
    // Sass (v3.4.4)
    // Compass (v1.0.1)
    // ----

    @mixin desc($name) {
    @at-root &-#{$name} { @content; }
    }

    @mixin tdesc($name, $parent) {
    @at-root #{$name} #{$parent} { @content; }
    }

    @mixin mod($name) {
    @at-root &--#{$name} { @content; }
    }

    @function with-parent($name, $parent) {
    @return #{$parent}-#{$name};
    }

    .Component {
    height: 10rem;
    $parent: &;

    // .Component-header
    @include desc(header) {
    height: 20rem;
    }
    // .Component--small
    @include mod(small) {
    height: 5rem;
    @include tdesc(&, with-parent(header, $parent)) {
    height: 10rem;
    }
    }
    }
    12 changes: 12 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    .Component {
    height: 10rem;
    }
    .Component-header {
    height: 20rem;
    }
    .Component--small {
    height: 5rem;
    }
    .Component--small .Component-header {
    height: 10rem;
    }