A collection of things you can do with Sass that are pretty cool

ninja-sass.scss

/*
 * Dynamically grab a partial based on a class name
 */
@function get-class-partial() {
  $className: str-slice(#{&}, 2);
  @return "../partials/_#{$className}.scss";
}

.signup {
  content: "#{get-class-partial()}";
}

/*
 * Output:
 *
 * .signup {
 *   @import "../partials/_signup.scss";
 * }
 *
 */



////////////////////
// CSS Extensions //
////////////////////

/*
 * Create nested properties using shorthand syntax
 */
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
/*
 * Output:
 *
 * .funky {
 *   font-family: fantasy;
 *   font-size: 30em;
 *   font-weight: bold;
 * }
 *
 */


/*
 * Placeholder Selectors
 */
%button-reset {
  appearance: none;
  outline: none;
  border: none;
}

.button {
  @extend %button-reset;
}

/*
 * Output:
 *
 * .button {
 *   appearance: none;
 *   outline: none;
 *   border: none;
 * }
 *
 */

Sass Lists

Not really a use case for the particular styles below but I was messing around with multi-dimensional lists and theres a lot of cool tricks you can do. With variables or mixins themselves being passed into a css list, it could be a very useful tool.

$pages: (
  home #000 7px top,
  about #f2f2f2 5px left,
  products #fff 10px bottom,
  contact #f9f9f9 15px right
);

@each $page in $pages {
  .#{nth($page, 1)}-page {
    background: nth($page, 2);
    font-size: nth($page, 3);
    border-#{nth($page, 4)}: nth($page, 3) solid nth($page, 2);
  }
}